Влияние ключа на расширение компонента React.Component

Question

Я создал очень простое приложение и попытался понять, как ведет себя ключ в случае расширения PureComponent и Component.

Однако из того, что я обнаружил, кажется, что при расширении PureComponent,это то, что я ищу, используя ключ, просто пропустите обновление b и c, и, очевидно, имеет повышение производительности. Но при расширении Component кажется, что при использовании ключа выигрыша в производительности нет [я не знаю, как измерить производительность, здесь, мне кажется, только когда вызывается метод, он должен работать как минимум немного хуже, чем немногобольше кода выполнено].

Вот код, который я использую для тестирования:

import React, { Component, PureComponent } from "react";

class Child extends PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }

  componentDidMount() {
    console.log("mount", this.props.name);
  }

  componentDidUpdate() {
    console.log("update", this.props.name);
  }

  componentWillUnmount() {
    console.log("unmount", this.props.name);
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["a", "b", "c"],
    };
  }

  render() {
    return (
      <div>
        {this.state.list.map(name => {
          return <Child key={name} name={name} />;
        })}
      </div>
    );
  }

  componentDidMount() {
      setTimeout(() => {
        this.setState({
            list: ["b", "c", "d"]
          });
      }, 1000)

  }
}

Вот журнал для одного расширяющего PureComponent:

unmount a
mount d

ИВот журнал для расширения компонента:

unmount a
update b
update c
mount d

Итак, мой вопрос

При использовании с расширением компонента React.Component, какова цель указания ключа? Может ли он иметь какой-либо прирост производительности, когда мы используем ключ в этом случае?

Answer 1

Ключ в основном используется для идентификации элемента в React по уникальному идентификатору, благодаря которому визуализация может быть оптимизирована. Как вы можете видеть только в своем примере, React определил, что другие два элемента не нужно менять. Без ключа он размонтировал бы все элементы и затем повторно отобразил бы их на экране, который не был оптимизирован.

Answer 2

key prop не имеет ничего общего с Component против PureComponent сравнения.

Разница между Component и PureComponent заключается только в том, чтоComponent не реализует shouldComponentUpdate(), где PureComponent реализует с поверхностным сравнением.

Клавиши помогают React определить, какие элементы были изменены, добавлены или являютсяудалены и поэтому решите, нужно ли переходить в фазу рендеринга.

См. Что такое ключи и Ключи должны быть уникальными только среди братьев и сестер .

Полученный результат обусловлен поверхностным сравнением, упомянутым выше, попробуйте добавить следующий код к Child extends Component, чтобы получить те же результаты:

// @ class Child extends Component
shouldComponentUpdate(nextProps, nextState) {
    return nextProps === this.props;
}

Результаты:

mount a 
mount b 
mount c 
unmount a 
mount d