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

【问题标题】：How to avoid React markup checksum warnings when rendering time渲染时间时如何避免 React 标记校验和警告
【发布时间】：2015-10-18 02:54:40
【问题描述】：

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

当您显示更细化的时间单位（如秒）时，错误的发生显然更加明显，但很高兴确保我也不会在分钟、小时、天等边界上遇到这种情况。

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

更多详情

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

【问题讨论】：

您几乎只需要确保您的初始客户端渲染调用与服务器端渲染具有完全相同的数据。这种数据不同是发生校验和错误的唯一方式。因此，始终使用来自服务器的数据快照来渲染客户端，然后连接到初始渲染之后可能发生的任何数据更改。
我知道这就是它发生的原因，但我正在渲染一些本来就在进步的东西。在服务器完成渲染和客户端完成渲染之间引入了错误。
好吧，您需要做一些事情，忽略您的数据在初始客户端渲染中发生变化的事实，即使它不正确。否则，您将继续看到此错误。我过去解决这个问题的方法是，例如在使用 Flux 时，我根据从服务器在页面 html 中发送的数据 json 初始化客户端通量存储，这与用于在服务器端呈现的数据结构完全对应。我用这些数据渲染一次，然后我引导我的其余 api 连接。
当然，您的另一个选择是不根据正在处理的部分数据来呈现服务器端组件。也许最初从服务器为相关组件呈现“加载”状态 - 然后仅从客户端引导该数据。
我正在使用 Flux（通过 Marty.js），我显示的数据是一组来自服务器脱水和客户端脱水存储的 Date 对象，但问题正在出现因为随着时间的推移，render() 返回的内容会有所不同。

标签： reactjs reactjs-flux isomorphic-javascript

【解决方案1】：

React Intl v2 已修复此问题。它添加了一个initialNow 属性来稳定渲染时间。

在 React Intl v2 中的 <FormattedRelative> 实例中添加了一项新功能，它们现在“勾选”并保持最新。随着时间的推移，现在命名的道具令人困惑，因此将其重命名为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

【讨论】：

【解决方案2】：

鉴于数据一呈现客户端就会发生变化，因此呈现该块服务器端是没有意义的。

所以制作一个小组件来呈现这部分信息，但只能在挂载后执行 force_update。

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

【讨论】：