Реагировать на методы жизненного цикла не срабатывают, есть ли какие-то взломы за методами жизненного цикла? - PullRequest
Новая
       35

Реагировать на методы жизненного цикла не срабатывают, есть ли какие-то взломы за методами жизненного цикла?

0 голосов
/ 16 июня 2020

Сегодня я нашел то, чего не ожидал. Этого не происходит в Angular или, возможно, в другой библиотеке / фреймворке JS. Но сегодня я был шокирован, когда не сработали методы жизненного цикла React. За этим стоит какой-то взлом. давайте посмотрим код.

У меня есть компонент A 

import React, { Component } from 'react'

class A extends Component {
  componentDidMount() {
    console.log('component mount', this.props.name);
  }

  render() {
    return (
      <>
        Hello - {this.props.name}
      </>
    )
  }
}

export default A;

Я дважды инициализировал этот компонент в App компоненте с некоторыми условиями: 

import React, { Component } from 'react';
import { render } from 'react-dom';
import A from './A';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true
    };

    this.setIsShow = this.setIsShow.bind(this);
  }

  setIsShow() {
    this.setState(() => {
      return {isShow: !this.state.isShow};
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.setIsShow}>Show A1</button>
        <button onClick={this.setIsShow}>Show A2</button>
        <br />
        <br />
        {this.state.isShow ? <A name="A1" /> 
        :
        <A name="A2" />
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Каково ожидаемое поведение? имя значение реквизита изменялось, когда я нажимал кнопки. это ожидается, хорошо. Но при повторной инициализации компонента не вызывается метод жизненного цикла :(. componentDidMount запускается только один раз.

Теперь добавьте свойство key в A , и вы увидите, что componentDidMount вызывается каждый раз, когда A компонент повторно инициализируется. 

{
 this.state.isShow ? <A name="A1" key="1" /> 
 :
 <A name="A2" key="2" />
}

Это ожидаемое поведение. вопрос, почему не без ключа свойства.

Checkout Online demo: https://stackblitz.com/edit/problem-react-lifecycle

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Здесь происходит оптимизация рендеринга для вас. Тот же компонент отображается с обновленной опорой по сравнению с размонтированием и повторным монтированием с другой опорой.

События жизненного цикла работают нормально, вы просто не видите свой console.log, потому что componentDidMount запускается только при монтировании . Если вы используете другое событие жизненного цикла, например componentDidUpdate, вы заметите, что оно запускается при каждом изменении. 

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

См. Живой пример здесь

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

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

0 голосов
/ 16 июня 2020

Отредактировано: Это потому, что React оптимизирует, чтобы не повторно отображать весь компонент. Добавление другого метода жизненного цикла покажет ожидаемый результат в консоли 

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