"isomorphic React"是什么意思?



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

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

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

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

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

同构:"形式或关系上对应或相似"。

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

特别是对于同构 React,这意味着服务器使用 React 组件和React.renderToString()为客户端渲染初始 HTML。这消除了双重工作,例如在使用 Rails 时在服务器端使用erb模板,但随后将 Handlebars 用于客户端模板,并且还避免了 FOUC。你可以把 React 用于所有事情。

现在,如果您使用的是第三方服务,则只需像往常一样使用json数据即可。使你的应用程序同构与否的是什么,是你自己的服务器是否使用与前端相同的模板引擎。你可能使用的任何第三方服务都与你的应用是否同构无关。

在高层次上理解同构。

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

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

客户端和服务器端渲染世界都有自己的好处,"同构JavaScript"是获得两全其美的方法。

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

最新更新