转载

《ReactJS》读书笔记十五

服务端渲染

React 的虚拟 DOM 是其可被用于服务端渲染的关键。首先，每个 React 组件在虚拟 DOM 中完成渲染，然后 React 通过虚拟 DOM 来更新浏览器 DOM 中产生变化的那一部分。虚拟 DOM 作为内存中的 DOM 表现，为 React 在 Node.js 这类非浏览器环境下的运行提供了可能。React 可以从虚拟 DOM 中生成一个字符串，而不是更新真正的 DOM。这使得我们可以在客户端和服务端使用同一个 React 组件

React 提供了两个可用于服务端渲染组件的函数： React.renderToString() 和 React.renderToStaticMarkup() 。

在设计用干服务端渲染的 React 组件时需要有预见性，需要考虑以下方面。

选取最优的渲染函数。
如何支持组件的异步状态。
如何将应用的初始状态传递到客户端。
那些生命周期函数可以用于服务端渲染。
如何为应用提供同构路由支持。
单例、实例以及上下文的用法。

渲染函数

服务端渲染对于搜索引擎优化来说至关重要。因为服务端不存在 DOM，所以无法使用标准的 React.render() 方法来渲染 React 组件，因此 React 还提供了两个渲染函数，它们支持标准 React 组件生命周期方法的一个子集，因而能够实现服务端渲染。

React.renderToString()

React.renderToString() 是两个服务端渲染函数中的一个，也是开发中主要使用的一个函数。和 React.render() 不同，该函数去掉了用于表示渲染位置的参数。取而代之，该函数只返回一个字符串。这是一个快速的同步(阻塞式)函数，非常快。

var MyComponent = React.createClass({  render: function(){   return <div>Hello World!</div>;  } });  var world = React.renderToString(<MyComponent/>);  <div data-reactid=".fgvrzhg2yo" data-react-checksum="-1663559667">  Hello World! </div>

你会注意到，React 为这个 <div> 元素添加了两个 data 前缀的属性。

在浏览器环境下，React 使用 data-reactid 来区分 DOM 节点。这也是每当组件的 state 及 props 发生变化时，React 都可以精准地更新指定 DOM 节点的原因。

data-react-checksum 仅仅存在于服务端。顾名思义，它是已创建 DOM 的校验和。这准许 React 在客户端复用与服务端结构上相同的 DOM 结构。该属性只会添加到根元素上。

React.renderToStaticMarkup()

React.renderToStaticMarkup() 是第二个服务端渲染函数。

除了不会包含 React 的 data 属性外，它和 React.renderToString() 没有区别。

var MyComponent = React.createClass({  render: function(){   return <div>Hello World!</div>  } });  var world = React.renderToStaticMarkup(<MyComponent/>);  <div>Hello World!</div>

用 `React.renderToString()` 还是用 `React.renderToStaticMarkup()`

每个渲染函数都有自己的用途，所以你必须明确自己的需求，再去决定使用哪个渲染函数。当且仅当你不打算在客户端渲染这个 React 组件时，才应该选择使用 React.renderToStaticMarkup() 函数。

下面是一些示例:

生成 HTML 电子邮件。
通过 HTML 到 PDF 的转化来生成 PDF。
组件测试。

大多数情况下，我们都会选择使用 React.renderToString() 。这将准许 React 使用 data-react-checksum 在客户端更迅速地初始化同一个 React 组件因为 React 可以重用服务端提供的 DOM，所以它可以跳过生成 DOM 节点以及把它们挂载到文档中这两个昂贵的进程。对于复杂些的站点，这样做会显著地减少加载时间，用户可以更快地与站点进行交互。

确保 React 组件能够在服务端和客户端准确地渲染出一致的结构是很重要的。如果 data-react-checksum 不匹配，React 会舍弃服务端提供的 DOM，然后生成新的 DOM 节点，并且将它们更新到文档中。此时，React 也不再拥有服务端渲染带来的各种性能上的优势。