如何让 React rehydration 忽略特定组件的校验和？答案

【问题标题】：How to let React rehydration ignore checksums of specific components?如何让 React rehydration 忽略特定组件的校验和？
【发布时间】：2017-08-29 13:16:47
【问题描述】：

在补水时，当最初渲染的标记与服务器标记不匹配时，React 会报错完全。然而，某些组件在客户端和服务器端产生不同的结果并不少见。最简单的是，考虑一个显示当前时间的组件：

function Now() {
  return <span>{ new Date().toString() }</span>;
}

显然这样的组件在每次渲染时都会显示不同的值，因此 React 总是会警告不正确的校验和。

对于特定组件，如果客户端呈现与服务器不同的东西，我如何告诉 React 没关系？

【问题讨论】：

标签： reactjs isomorphic-javascript

【解决方案1】：

回答我自己的问题，因为 React v16 the documentation 是这么说的：

如果您有意在服务器和客户端上渲染不同的东西，您可以进行两次渲染。在客户端呈现不同内容的组件可以读取像 this.state.isClient 这样的状态变量，您可以在 componentDidMount() 中将其设置为 true。这样，初始渲染通道将渲染与服务器相同的内容，避免不匹配，但额外的通道将在水化后立即同步发生。请注意，这种方法会使您的组件变慢，因为它们必须渲染两次，因此请谨慎使用。

【讨论】：