Блог

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

     class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

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

Взято из документов React:

componentDidMount() вызывается сразу после монтирования компонента (вставки в дерево).

так что да, но…

Также из документов:

Вы можете немедленно вызвать setState() в componentDidMount(). Это вызовет дополнительный рендеринг, но это произойдет до того, как браузер обновит экран. Это гарантирует, что даже если render () в этом случае будет вызван дважды, пользователь не увидит промежуточное состояние.

Это означает, что вы увидите только желтый цвет.

componentDidMount это метод жизненного цикла, который вызывается только при монтировании компонента. Он вызывается только один раз после первого рендеринга.

 componentDidMount() {
    // Runs after the first render() lifecycle
}
  

Когда React просматривает этот код, он собирается сначала отобразить компонент ( constructor() это первый вызываемый метод), и сначала вы увидите цвет red .

Сразу после этого React проверяет, есть ли у компонента componentDidMount() метод для запуска каких-либо побочных эффектов.

В вашем componentDidMount() методе вы указываете React обновить состояние компонента.

Итак, this.state.favoritecolor перешел от red к yellow .

Полезная ссылка: Понимание React componentDidMount и того, как это работает