同构反应意味着什么

时间:2017-03-28 08:42:36

标签: reactjs isomorphic

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

根据我的理解,Isomorphic React应用程序是它在开始时加载所需的所有数据,然后根据用户在存储中保存完整数据的请求(Redux architechture)继续在客户端呈现。

现在如果我有一个场景,比如我需要使用来自第三方应用程序的webservice加载我的完整HTML表单,我从中获取数据作为json(需要在其上呈现哪些字段的模式屏幕)并且在执行某些操作后,我需要将请求发送回来,以便我将获得一些其他模式以将其加载为我的下一个屏幕。 在这种情况下,我每次需要进行服务器调用或ajax调用时都会使用isomorphic(我不喜欢这样做,因为它可能会暴露API)

所以在这种情况下我可以说这个应用程序是同构的还是我的理解w.r.t isomorphic是完全错误的?

2 个答案:

答案 0 :(得分:2)

同构:“形式或关系中相应或相似”。

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

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

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

答案 1 :(得分:0)

全面了解同构。

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

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

客户端和服务器端渲染世界各有各的优势,“同构JavaScript”是获得两者最好的途径。

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