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

我有一个简单的react应用程序，可以显示5000种产品的名称和价格。价格是可编辑的，一旦更改，价格将反映在状态中

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

我使用不变性助手，并且我专门更改了更改产品的状态记录

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

在一个产品构建中，它的延迟更少，但所有产品都被重新呈现，这是我试图解决的根本问题

---

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

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
}

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

非常好。它肯定会帮助您了解React Fiber如何管理更新

---

您可以通过非常长的列表来提高感知性能。

它不会停止重新渲染。他们的“键”将调用先前调用的相同组件，并调用

componentWillUpdate

，而不是

componentWillMount

。要停止渲染，请使用

shouldComponentUpdate

停止重新渲染。我添加了一个componentshouldcomponentupdate函数。现在更新在开发中是滞后的，但在生产上没有滞后。我会认为这是一个很好的结果，并确保架构师我的应用程序从来没有这样大的名单。在提交之前，我想突破React的限制。请参阅更新的github：