Почему компонент React обновляется, если реквизиты и состояние не изменились - PullRequest
Новая
       11

Почему компонент React обновляется, если реквизиты и состояние не изменились

0 голосов
/ 22 марта 2020

React Copmponent рендерится, когда его состояние или propr остаются прежними. Я не понимаю, почему он выполняет повторное рендеринг / обновление, поскольку результат не изменится 

class A extends Component {
  render() {
    console.log("Hello")
    return "Foo";
  }
}
class App extends Component {
  constructor(props) {
    super(props);

    this.state = { a: "ASDA" };
  }

  render() {
    return (
      <div>
        <button onClick={()=>this.setState({a: Math.random()}) }>asdsa</button>
        <div>{this.state.a}</div>
        <A />
      </div>
    );
  }

Каждый раз, когда я нажимаю кнопку, компонент A перерисовывается (я вижу «hello» в консоли) I думал, что Реакт избегает многих бесполезных переизданий.

1 Ответ

2 голосов
/ 22 марта 2020

Ваш родительский компонент выполняет повторную визуализацию, поскольку его состояние изменяется.

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

Этот результат затем сравнивается с существующим DOM. Это не значит, что фактические DOM изменяются для дочерних компонентов, просто они переоцениваются, потому что DOM может измениться.

Если окажется, что дочерний элемент нужно изменить, затем этот элемент в реальном DOM будет перерисован. Если дочерний элемент не нуждается в изменении, этот элемент в DOM остается незатронутым.

Обычно это нормально и имеет минимальное или нулевое влияние на производительность для небольших компонентов, поэтому обычно вы не делаете об этом не нужно беспокоиться.

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

...