Блог

Главная - Вопросы по программированию - Вызывается ли componentDidUpdate для родителя при изменении состояния дочерних компонентов?

Вызывается ли componentDidUpdate для родителя при изменении состояния дочерних компонентов?

#reactjs

Вопрос:

Я думаю, что ответ отрицательный, но я просто хотел подтвердить. Чтобы вызвать componentDidUpdate для родителя, нам нужно будет обновить состояние родителей, верно? Простого обновления состояния детей недостаточно, верно?

Заранее спасибо.

Ответ №1:

Самый простой способ узнать это-попробовать…

Здесь вы можете видеть, что: Нет, он не будет вызывать родительский componentDidUpdate , если состояние родителя (или его родителя) не изменится.

 class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'parent' }
  }
  
  componentDidUpdate() {
    console.log('Parent Updated');
  }
  
  onChange = (e) => {
    this.setState({ value: e.target.value });
  }
  
  render() {
    return <Child value={this.state.value} onChange={this.onChange} />
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'child' }
  }
  
  componentDidUpdate() {
    console.log('Child Updated');
  }
  
  onChange = (e) => {
    this.setState({ value: e.target.value });
  }
  
  render() {
    return (
      <div>
        <div>
          <input value={this.props.value} onChange={this.props.onChange} />
        </div>
        <div>
          <input value={this.state.value} onChange={this.onChange} />
        </div>
      </div>
     );
  }
}


ReactDOM.render(<Parent />, document.getElementById('react')); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"/>
Метки: