Question

起初，我最喜欢的颜色是红色，但请稍等一下，然后是黄色。会导致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'));

Answer 1

来自React文档：

componentDidMount（）在安装组件（插入树中）后立即被调用。

是的，但是...

也来自文档：

您可以立即在componentDidMount（）中调用setState（）。它会触发额外的渲染，但是会在浏览器更新屏幕之前发生。这样可以保证即使在这种情况下render（）将被调用两次，用户也不会看到中间状态。

这意味着您只会看到黄色。

Answer 2

componentDidMount是一种生命周期方法，仅在安装组件时才调用。在第一次渲染后仅调用一次。

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

React查看此代码时，它将首先呈现组件（constructor()是第一个调用的方法），您首先会看到颜色为red。

此后，React检查组件是否具有componentDidMount()方法来运行任何副作用。

在您的componentDidMount()方法中，您告诉React更新组件的状态。

因此，this.state.favoritecolor从red变成了yellow。

有用的链接：Understanding React componentDidMount and how it works

componentDidMount是否重新渲染组件？

2 个答案: