在React.js中加载异步数据时防止UI闪烁

Question

我在IndexedDB中有一些数据,只能异步访问.我想使用该数据构建React.js UI.一般的想法是我将有多个React组件从IndexedDB加载数据并根据该数据显示一些UI,用户将能够在当前显示的组件之间切换.

我担心的是,如果没有多余的UI闪烁,我不知道如何优雅地实现这一目标.我可以加载异步数据componentDidMount并将数据放入this.state,但随后render会在完成之前调用,迫使我显示任何内容,或者在检索到IndexedDB的数据时显示一些占位符数据.

我宁愿拥有它,render直到我加载了IndexedDB的数据.我知道加载不会花费很长时间,我宁愿在新数据加载时继续显示前一个组件,因此只有一个闪烁(旧 - >新)而不是两个(旧 - >空白/占位符 - >新).这更像是普通网页的工作方式.当您单击从一个网站到另一个网站的链接时,您的浏览器在等待来自链接网站的服务器进行响应时不会立即显示空白/占位符屏幕.

我想我可以在调用之前将数据加载到React组件之外,React.render然后将其传递给via this.props.但这看起来很混乱,因为嵌套组件会变得棘手,我的一些组件会随着时间的推移而更新,并通过初始化它们的完全相同的代码从IndexedDB中提取新数据.因此,它似乎是存储数据的理想用例,this.state因为当我得到新数据可用的信号时,我可以在组件内更新它.初始化和更新就像调用一个this.loadData()设置某些值的函数一样简单this.state......但是我有上面提到的额外闪烁.

有没有人有更好的想法？这个问题的规范解决方案是什么？是不是真的只有毫秒空白/占位符闪烁到处？

Answer 1

从评论中听起来就像您在之前的实现中所拥有的行为(等待导航直到您获取了必要的数据)是期望的目标.如果是这种情况,那么在没有闪烁的情况下执行此操作的最佳方法是使用一些外部对象来管理状态,并在获取数据时将数据作为道具传递.

React Router有一个很好的解决方案,它有一个willTransitionTo钩子来在导航之前获取给定组件的数据.这样做的另一个好处是,如果出现问题,您可以轻松捕获错误.

更新了新链接:

https://github.com/reactjs/react-router