javascript - 在具有许多子组件的组件上改进 updateState - Reactjs

Question

• 以上是我正在处理的反应页面的基本结构。一旦有人从 datepicker 中选择了一个日期，就会有一个 api 调用来获取数据。
• 最初数据为空，因为没有选择日期。
• 一旦有人选择了一个日期，就会获取数据并渲染父组件和子组件，这种渲染发生得有点快，我认为这是因为初始数据是空的。
• 此时，（父组件和大约 3000 个子组件已经渲染）如果有人从日期选择器更改日期，将有一个 api 调用来获取数据，然后渲染非常慢（大约花了 3-4秒渲染）。

看起来一旦新数据集到来，父组件将得到更新，并且反应将卸载旧的子组件，在我的情况下它大约是 3000。我认为卸载子组件会花费这个。

这个时间延迟对应用程序性能造成了如此糟糕的影响，我正在寻找一种解决方案来提高性能。

标签： javascriptreactjsperformancereact-component

Answer 1

最简单的方法是创建子实例，PureComponent以便它们不会更新，除非它们的属性发生变化，或者shouldComponentUpdate()如果您需要自定义行为则实施。有关更多提示，请参阅https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation。