当一个项目发生更改时，React会重新呈现整个列表

Question

我有一个简单的反应应用程序，呈现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可以帮助您减少子组件中的更新次数

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

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以提高超长列表的感知性。