React，如何通过重新选择停止重新渲染应用程序？

Question

这是代码：codepen。 问题是，当我添加新的待办事项或将待办事项状态更改为已完成时，其他待办事项也会重新渲染？

有什么办法可以阻止这种情况吗？

Answer 1

如果你使用函数式组件，那么使用 React.memo，如果使用基于类的组件，使用 React.PureComponent

React.memo：https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control

React.PureComponent：https://ozmoroz.com/2018/09/what-is-purecomponent/

这些背后的想法是检查组件的 props 并且只有在 props 更改时才重新渲染。这些组件在内部使用生命周期方法 shouldComponentUpdate 并根据 prop 的变化决定是否重新渲染组件。

不过有一个问题，React 只对具有嵌套属性的对象和具有嵌套对象的数组执行浅层检查，因此可能会也可能不会发生重新渲染。