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

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

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

Answer 3

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

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

Я надеюсь, что это помогает.

Answer 4

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

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

Или же

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

Крюки жизненного цикла творчества:

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