42

我正在浏览 React 教程,在网上我看到了很多关于同构 React 的信息。只是对它是什么以及它如何工作感到困惑。

我的理解是,“同构 React”是一个应用程序,它在启动时加载所需的所有数据,然后根据用户的请求在客户端保持渲染,将完整的数据保存在存储中(Redux 架构)。

现在,如果我有一个场景,比如我需要使用来自 3rd 方应用程序的 web 服务加载我的完整 HTML 表单,我从它获取数据作为 json(需要在屏幕上呈现哪些字段的模式)并执行一些操作我需要发回请求,以便我将获得一些其他模式来加载它作为我的下一个屏幕。

在这种情况下,我如何使用同构,因为每次我需要进行服务器调用或 ajax 调用(我不喜欢这样做,因为它可能会暴露 API)。

那么在这种情况下,我可以说这个应用程序是同构的还是我对同构的理解是完全错误的?

4

2 回答 2

41

同构:“在形式或关系上对应或相似”。

对于 Web 应用程序,这意味着服务器在某种程度上类似于客户端 - 从某种意义上说,服务器能够呈现与客户端一样多的内容。在某种程度上,同构 Web 应用程序是对旧范式的回归,在旧范式中,服务器将呈现数据,然后将其预呈现给客户端(想想 PHP 模板或 Ruby erb)。

特别是对于同构 React,这意味着服务器使用 React 组件和React.renderToString(). 这消除了双重工作,例如erb在使用 Rails 时在服务器端使用模板,然后将 Handlebars 用于客户端模板,并且还避免了FOUC。你可以将 React 用于一切。

现在,如果您使用的是 3rd 方服务,您只需照常使用 json 数据。使您的应用程序同构与否的原因在于您自己的服务器是否使用与前端相同的模板引擎。您可能使用的任何第三方服务都与您的应用程序是否同构无关。

于 2017-03-28T19:14:40.103 回答
15

在高层次上理解同构。

服务器驱动的世界:在这个世界中,当用户在浏览器中打开一个页面时,客户端(浏览器)和服务器之间发生了很多交互。为了在浏览器中加载页面,浏览器和服务器通过发送请求和渲染来工作,以向用户提供网页。在这个世界中,服务器负责渲染每个页面以响应用户交互。例如; 如果用户单击提交按钮,则请求将使用用户在表单中输入的数据发送到服务器,作为响应,服务器会将带有数据的新 HTML 返回到浏览器以显示下一个屏幕。这里的服务器也负责 UI 以及业务逻辑和数据模型。这种方法有很多优点和缺点。

客户端驱动的世界或单页应用程序世界 在这个世界中,网页渲染的责任交给了客户端(浏览器),而服务器主要负责业务逻辑和数据模型。这同样有很多优点和一些缺点。

客户端和服务器端渲染世界各有其优点,“同构 JavaScript”是获得两全其美的方式。

React 是一个提供开箱即用的同构支持的框架。

于 2019-04-18T06:42:10.860 回答