React可用于服务器端呈现。那是什么意思?

时间:2016-09-13 09:14:05

标签: reactjs redux isomorphic-javascript

我是React和Redux的新手。虽然我知道React只是一个视图层。但我看到一个术语" React可用于服务器端渲染"。这意味着什么以及它如何在nodejs的幕后工作。任何人都可以帮助我清楚地了解"什么是服务器端渲染反应"。

1 个答案:

答案 0 :(得分:4)

react-dom包中包含server模块。此模块允许您将react应用程序呈现为reactDOMServer.renderTostring()的简单HTML字符串。基本上是一组给定props的视图快照:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

此外,此函数根据其生成的字符串计算唯一哈希,并将其附加到html。在客户端反应可以"拿起"服务器生成HTML并将其用作"首先渲染"。

虽然客户端首先渲染并且服务器渲染需要生成完全相同的输出,以便在客户端进行反应。 React可以通过生成的哈希检查这个:客户端反应也会生成一个html字符串(不修改实际的DOM,我认为这只在虚拟DOM上完成)。现在,它还可以从其虚拟DOM计算哈希值,并将其与提供的哈希值进行比较。如果它们匹配,则不需要进行渲染。如果他们不这样做,客户端反应将丢弃服务器生成的DOM并将其替换为其版本(并打印出错误/警告)。

与redux结合使用,这意味着除了呈现HTML之外,您还需要将商店的状态(store.getState())传递给客户端。然后,客户端可以在创建redux存储的实例时将此序列化状态用作初始状态。这将导致两个渲染(客户端+服务器)匹配。

如果您不需要客户端做任何事情而只想在服务器端创建静态标记,react-dom会提供renderToStaticMarkup()功能:

https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup