如何让 React 解除冻结忽略特定组件的校验和?

Question

当解除冻结时，当最初渲染的标记与服务器标记不完全匹配时，React 会抱怨。但是，某些组件在客户端和服务器端不产生相同的结果的情况并不少见。最简单的事情是，考虑一个显示当前时间的组件：

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

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

我如何告诉 React 如果客户端针对特定组件渲染与服务器不同的内容是可以的？

Answer 1

为了回答我自己的问题，由于 React v16 文档对此进行了说明：

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