Почему жизненный цикл обновления компонента выполняется всякий раз, когда изменяется состояние родителя?

Question

У меня есть родительский компонент с именем «App», в котором используется дочерний компонент с именем «NewComp». Я определил жизненный цикл componentDidUpdate () внутри дочернего компонента, а не в родительском компоненте.

Родительский компонент:

class App extends Component {

    state = {
      count:0,
    }

    change = () =>{
      this.setState({
        count:this.state.count+1,
      })
    }

    render() {

      return (
        <div>
          <p>Count = {this.state.count}</p>
          <button onClick={this.change}>Add Count</button>
          <NewComp />
        </div>
      );
    }
}

Дочерний компонент:

export default class NewComp extends Component {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

Теперь каждый раз, когда я меняю родительское состояние кнопкой «Добавить счетчик», componentDidMount () в дочернем компоненте выполняется, даже если в дочернем компоненте нет изменений

Answer 1

Родительский компонент запускается для повторного рендеринга, и в вашем NewComp, shouldComponentUpdate всегда возвращает true по умолчанию, поэтому NewComp также запускается на повторный рендеринг.Вы можете избежать этого, внедрив shouldComponentUpdate в NewComp или используя PureComponent:

export default class NewComp extends PureComponent {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

Answer 2

вы можете увидеть ниже запрос.Что похоже на ваше

Реакция: Родительский компонент повторно отображает все дочерние элементы, даже те, которые не изменились при изменении состояния

Надеюсь, это поможет.

Answer 3

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

Если вы хотите выполнить некоторую логику только при создании компонента, рассмотрите возможность использования ловушек Creational Lifecycle

или

Если вы хотите использовать componentDidUpdate, проверьте, не изменилось ли желаемое значение state или prop , а затем переходите к

Крюки жизненного цикла создания:

Обновление крючков жизненного цикла:

Answer 4

Вы можете использовать shouldComponentUpdate метод жизненного цикла для контроля, когда компонент может обновляться.Обычно componentDidUpdate выполняется при обновлении реквизита или состояния.