Почему все дочерние элементы PureComponent контейнера обновляются, если в дереве состояний контейнера изменяется только состояние одного дочернего элемента?

Question

Изучение React и Redux. Я играю с примерами Redux, а сейчас смотрю на пример todo-with-undo (не думаю, что можно создать песочницу или что-то в этом роде). В этой настройке есть компонент контейнера (TodoList) и его дочерние элементы (Todo).

Я изменил Todo с функционального компонента на класс PureComponent, так что 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 будет обрабатывать сравнение свойств и состояния за вас, реализуя shouldComponentUpdate с мелким сравнением свойств и состояний.