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

Question

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

当您显示更精细的时间单位（如秒）时，错误的发生显然更加明显，但最好确保我不会运行在分钟、小时、天、等边界也是如此。

有没有办法在客户端有效地告诉 React，"It's OK, this little portion of the DOM here can differ from the server side"？或者我没有想到的其他方式？

更多详情

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

Answer 1

鉴于数据在呈现客户端后会立即发生变化，因此没有必要在服务器端呈现该块。

因此制作一个小组件来呈现这部分信息，但仅在安装后执行 force_update。

在挂载之前，只需放置您希望用户在渲染完成之前立即看到的任何内容

Answer 2

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

A new feature has been added to <FormattedRelative> instances in React Intl v2, they now "tick" and stay up to date. Since time moves forward, it was confusing to have a prop named now, so it has been renamed to initialNow. Any <FormattedRelative> instances that use now should update to prop name to initialNow:

用法：

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

您也可以在 IntlProvider 上提供此信息，在这种情况下，所有 FormattedRelative 个实例都已稳定。

Note: The <IntlProvider> component also has a initialNow prop which can be assigned a value to stabilize the "now" reference time for all <FormattedRelative> instances. This is useful for universal/isomorphic apps to proper React checksums between the server and client initial render.

用法：

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

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

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

How to avoid React markup checksum warnings when rendering time

reactjs

reactjs-flux

isomorphic-javascript