为什么在容器的状态树中只修改了一个子节点的状态时，容器的所有 PureComponent 子节点都会更新？

Question

学习 React 和 Redux。我正在使用 Redux 示例，目前正在查看 todo-with-undo 示例（认为不可能设置沙箱或其他东西）。在此设置中，有一个容器组件 (TodoList) 和它的子组件 (Todo)。

我将 Todo 从一个功能组件修改为 PureComponent 类，因此如果所有的 prop 引用都相同，shouldComponentUpdate() 将返回 false，因此组件不应更新（但它们仍会重新渲染？？？） .

添加代码在子组件使用 componentDidUpdate() 方法更新时进行记录，并在重新渲染时进行记录，这表明每次将新的 Todo 添加到容器中时，所有元素都会更新并重新渲染 -即使是 PureComponents - 每个孩子的新旧道具的浅层比较应该为新的或更新的孩子返回 false。

作为 Redux 构建的示例，我怀疑他们是否错误地更新了商店（不是以不可变的方式），因为这是他们概念的重点，所以我相信我没有完全理解某些东西 -> 有人请帮忙.. .

Answer 1

因为<TodoList> 正在向每个孩子传递一个新的回调函数引用：

export default class TodoList extends Component {
  render() {
    return (
      <ul>
        {this.props.todos.map((todo, index) =>
          <Todo {...todo}
                key={index}
                onClick={() => this.props.onTodoClick(index)} />
        )}
      </ul>
    );
  }
}

这总是会导致子级重新渲染，即使它试图根据道具比较优化渲染。

Answer 2

PureComponent 并不意味着它不会更新，它只是意味着 React 将通过实现带有浅 prop 和状态比较的 shouldComponentUpdate 来为你处理 prop 和状态的比较。