在 React.js 中加载异步数据时防止 UI 闪烁
Preventing UI flicker when loading async data in React.js
我在IndexedDB中有一些数据，只能异步访问。我想使用该数据构建一个 React.js UI。总体思路是我将有多个 React 组件从 IndexedDB 加载数据并根据该数据显示一些 UI，用户将能够在当前显示的组件之间切换。
我担心的是我不知道如何在没有一些多余 UI 闪烁的情况下优雅地完成此操作。我可以在 componentDidMount 中执行异步数据加载并将数据放入 this.state，但是 render 将在它完成之前被调用，迫使我不显示任何内容或显示一些占位符数据从 IndexedDB 检索数据时的一小部分。
我宁愿 render 在加载来自 IndexedDB 的数据之前不要使用它。我知道加载不会花很长时间，我宁愿在加载新数据时继续显示前一个组件，所以只有一个闪烁（旧 -> 新）而不是两个（旧 -> blank/placeholder -> 新）。这更像是普通网页的工作方式。当您从一个网站单击 link 到另一个网站时，您的浏览器在等待 linked 网站的服务器响应时不会立即显示 blank/placeholder 屏幕。
我想我可以在调用 React.render 之前在 React 组件之外加载数据，然后通过 this.props 将其传入。但这看起来很混乱，因为嵌套组件会变得棘手，并且我的一些组件将随着时间的推移进行更新并通过初始化它们的完全相同的代码从 IndexedDB 中提取新数据。因此，这似乎是将数据存储在 this.state 中的理想用例，因为当我收到新数据可用的信号时，我可以在组件本身内更新它。初始化和更新就像调用 this.loadData() 函数一样简单，该函数在 this.state 中设置一些值...但是我有上述额外的闪烁。
有没有人有更好的主意？这个问题的规范解决方案是什么？真的只有毫秒 blank/placeholder 到处闪烁吗？
从评论来看，您在之前的实现中的行为（等待导航直到您获取必要的数据）似乎是期望的目标。如果是这种情况，最好的方法是使用一些外部对象来管理状态并在获取数据时将数据作为道具传递。
React Router 有一个很好的解决方案，它有 willTransitionTo 挂钩，可以在导航之前为给定组件获取数据。这样做的额外好处是，如果出现问题，您可以轻松捕获错误。
已更新 link：
我在IndexedDB中有一些数据，只能异步访问。我想使用该数据构建一个 React.js UI。总体思路是我将有多个 React 组件从 IndexedDB 加载数据并根据该数据显示一些 UI，用户将能够在当前显示的组件之间切换。
我担心的是我不知道如何在没有一些多余 UI 闪烁的情况下优雅地完成此操作。我可以在 componentDidMount 中执行异步数据加载并将数据放入 this.state，但是 render 将在它完成之前被调用，迫使我不显示任何内容或显示一些占位符数据从 IndexedDB 检索数据时的一小部分。
我宁愿 render 在加载来自 IndexedDB 的数据之前不要使用它。我知道加载不会花很长时间，我宁愿在加载新数据时继续显示前一个组件，所以只有一个闪烁（旧 -> 新）而不是两个（旧 -> blank/placeholder -> 新）。这更像是普通网页的工作方式。当您从一个网站单击 link 到另一个网站时，您的浏览器在等待 linked 网站的服务器响应时不会立即显示 blank/placeholder 屏幕。
我想我可以在调用 React.render 之前在 React 组件之外加载数据，然后通过 this.props 将其传入。但这看起来很混乱，因为嵌套组件会变得棘手，并且我的一些组件将随着时间的推移进行更新并通过初始化它们的完全相同的代码从 IndexedDB 中提取新数据。因此，这似乎是将数据存储在 this.state 中的理想用例，因为当我收到新数据可用的信号时，我可以在组件本身内更新它。初始化和更新就像调用 this.loadData() 函数一样简单，该函数在 this.state 中设置一些值...但是我有上述额外的闪烁。
有没有人有更好的主意？这个问题的规范解决方案是什么？真的只有毫秒 blank/placeholder 到处闪烁吗？
从评论来看，您在之前的实现中的行为（等待导航直到您获取必要的数据）似乎是期望的目标。如果是这种情况，最好的方法是使用一些外部对象来管理状态并在获取数据时将数据作为道具传递。
React Router 有一个很好的解决方案，它有 willTransitionTo 挂钩，可以在导航之前为给定组件获取数据。这样做的额外好处是，如果出现问题，您可以轻松捕获错误。
已更新 link：