当一项更改时，React 会重新渲染整个列表

Question

我有一个简单的 React 应用程序，它可以呈现 5000 种产品的名称和价格。价格是可编辑的，更改后价格会反映在状态中。

https://github.com/TonyCaffer/thinking-in-react-1

App.js 通过 onChangePrice 函数管理状态并处理价格变化，该函数被传递给 ProductTable 和每个 ProductRow

我使用 immutability-helpers 并且我专门只更改了已更改产品的状态记录。

但每次更改都会有明显的一秒延迟，因为 React 正在重新渲染所有产品。每个产品都有一个关键属性，我认为这有助于 React 只重新渲染必要的组件。

在生产版本中，它的滞后性较小，但所有产品都会重新渲染，这是我要解决的根本问题。

为什么要重新渲染所有产品组件？是因为我通过高级 ProductTable 传递 this.state.products 从而触发列表的总重绘？如果是这样，当状态在列表中时，每个 ProductRow 如何管理自己的记录状态？

Answer 1

React 将更新安排在两个阶段：协调器阶段（或渲染阶段，因为它涉及我们定义的组件的渲染方法）和提交阶段。当状态更新时，React 无论如何都会启动更新过程。使用适当的 shouldComponentUpdate 可以帮助您减少子组件中的更新次数

可能的解决方案：为ProductRow 使用shouldComponentUpdate，如下所示：

shouldComponentUpdate(nextProps) {
  if (
    this.props.guid !== nextProps.guid
    || // similarly check if the other new props are different
  ) {
    return true;
  }
  return false
}

上述检查将确保当父级检测到 setState 并在新的 React Fiber 的工作循环中安排更新时，不会重新计算子组件并且提交阶段完全跳过任何 DOM 更新。

Lin Clark explains the two phases 真的很好。它肯定会帮助您了解 React Fiber 如何管理更新。

您可以查看 React Virtualised 以提高对极长列表的感知性能。