如何避免渲染时的React标记校验和警告

Question

当利用同构渲染显示时间的React组件时，我偶尔会遇到服务器在A点呈现时间的问题，但是当客户端选择SPA作为SPA时，从点开始的时间A已更改为指向B，React会发出React attempted to reuse markup in a container but the checksum was invalid警告：

当您显示更精细的时间单位（例如秒）时，错误的发生显然更加明显，但确保我不会在分钟，小时，日等边界上遇到此问题会很好。好。

有没有办法在客户端告诉React，有效地，＆＃34;没关系，这里的DOM的这一小部分可能与服务器端不同＆＃34; ？或者也许是我想不到的另一种方式？

更多详情

我使用React-Intl FormattedRelative组件以友好的方式显示项目的创建日期。项目的创建日期当然在客户端和服务器之间保持相同（并在序列化的Flux存储中传递给客户端），但服务器渲染和客户端渲染时间差足够长，以至于渲染的HTML频繁 - 但并不总是 - 不同。

Answer 1

看到数据一旦呈现客户端就会发生变化，没有必要渲染那个块服务器端。

所以制作一个渲染这部分信息的小组件，但只能在安装后执行force_update。

在mount之前，只需在渲染完成之前放置您希望用户查看的内容

Answer 2

这已通过React Intl v2修复。它添加了initialNow属性来稳定渲染时间。

  

在React Intl v2中的<FormattedRelative>个实例中添加了一项新功能，它们现在“打勾”并保持最新状态。随着时间的推移，现在有一个名为prop的道具令人困惑，因此它已被重命名为initialNow。现在使用的任何<FormattedRelative>实例都应更新为initialNow的道具名称：

用法：

<FormattedRelative value={date} initialNow={Date.now()}/>

您也可以在IntlProvider上提供此功能，在这种情况下，所有FormattedRelative实例都会稳定下来。

  

注意：<IntlProvider>组件也有一个initialNow道具，可以为其分配一个值，以稳定所有<FormattedRelative>个实例的“现在”参考时间。这对于通用/同构应用程序在服务器和客户端初始渲染之间正确的React校验和非常有用。

用法：

<IntlProvider initialNow={Date.now()}>
  <FormattedRelative value={date}/>
</IntlProvider>

参考：https://github.com/yahoo/react-intl/wiki/Upgrade-Guide#update-how-relative-times-are-formatted