当重新水化时,当最初呈现的标记与服务器标记完全匹配时,React会抱怨。然而,某些组件在客户端和服务器端不能产生相同的结果并不是完全不常见的。最重要的是,考虑一个显示当前时间的组件:
function Now() {
return <span>{ new Date().toString() }</span>;
}
显然,这样的组件每次渲染时都会显示不同的值,因此React会一直警告错误的校验和。
如果客户端针对特定组件呈现与服务器不同的内容,我怎么能告诉React可以呢?
答案 0 :(得分:1)
要回答我自己的问题,因为React v16 the documentation说明了这一点:
如果您故意需要在服务器和客户端上呈现不同的内容,则可以执行两次渲染。在客户端上呈现不同内容的组件可以读取像this.state.isClient这样的状态变量,您可以在componentDidMount()中将其设置为true。这样,初始渲染过程将呈现与服务器相同的内容,从而避免不匹配,但在水合后立即同步进行额外的过程。请注意,这种方法会使组件变慢,因为它们必须渲染两次,因此请谨慎使用。