React 可用于服务器端渲染。那是什么意思?
React can be used on server side rendering. What does that mean?
我是 React 和 Redux 的新手。虽然我知道 React 只是一个视图层。但是我看到了一个词"React can be used on server side rendering"。这是什么意思以及它在幕后如何与 nodejs.Can 一起工作 任何人都可以帮助我弄清楚 "What is server side render in react" 的事实。
react-dom
软件包包含一个 server
模块。该模块允许您将 React 应用程序渲染为一个简单的 HTML 字符串 reactDOMServer.renderTostring()
。基本上是给定一组 props
:
的视图快照
https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring
此外,此函数根据其生成的字符串计算出一个唯一的哈希值,并将其附加到 html。在 客户端 反应可以 "pick up" 服务器生成 HTML 并将其用作其 "first render".
虽然客户端首先呈现和服务器呈现需要产生完全相同的输出以做出反应以在客户端接收它。 React 可以通过生成的哈希来检查这一点:客户端 React 也会生成一个 html 字符串(不修改实际的 DOM,我认为这只在虚拟的 DOM 上完成)。现在它还可以从其虚拟 DOM 计算出一个哈希值,并将其与服务器呈现的哈希值进行比较。如果它们匹配,则不需要进行渲染。如果他们不这样做,客户端反应将丢弃服务器生成的 DOM 并用它的版本替换它(并打印出 error/warning)。
与 redux 结合,这意味着除了渲染 HTML 之外,您还需要将商店的状态 (store.getState()
) 传递给客户端。然后,客户端可以在创建其 redux 存储实例时使用此序列化状态作为初始状态。这将导致两个渲染(客户端 + 服务器)匹配。
如果您不需要客户端做任何事情,只想在服务器端创建静态标记,react-dom
提供了一个 renderToStaticMarkup()
函数:
https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup
我是 React 和 Redux 的新手。虽然我知道 React 只是一个视图层。但是我看到了一个词"React can be used on server side rendering"。这是什么意思以及它在幕后如何与 nodejs.Can 一起工作 任何人都可以帮助我弄清楚 "What is server side render in react" 的事实。
react-dom
软件包包含一个 server
模块。该模块允许您将 React 应用程序渲染为一个简单的 HTML 字符串 reactDOMServer.renderTostring()
。基本上是给定一组 props
:
https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring
此外,此函数根据其生成的字符串计算出一个唯一的哈希值,并将其附加到 html。在 客户端 反应可以 "pick up" 服务器生成 HTML 并将其用作其 "first render".
虽然客户端首先呈现和服务器呈现需要产生完全相同的输出以做出反应以在客户端接收它。 React 可以通过生成的哈希来检查这一点:客户端 React 也会生成一个 html 字符串(不修改实际的 DOM,我认为这只在虚拟的 DOM 上完成)。现在它还可以从其虚拟 DOM 计算出一个哈希值,并将其与服务器呈现的哈希值进行比较。如果它们匹配,则不需要进行渲染。如果他们不这样做,客户端反应将丢弃服务器生成的 DOM 并用它的版本替换它(并打印出 error/warning)。
与 redux 结合,这意味着除了渲染 HTML 之外,您还需要将商店的状态 (store.getState()
) 传递给客户端。然后,客户端可以在创建其 redux 存储实例时使用此序列化状态作为初始状态。这将导致两个渲染(客户端 + 服务器)匹配。
如果您不需要客户端做任何事情,只想在服务器端创建静态标记,react-dom
提供了一个 renderToStaticMarkup()
函数:
https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup