React生命周期

React 生命周期

生命周期阶段

---

1. 挂载阶段（Mounting）：这是组件即将开始其生命之旅并进入 DOM 的阶段。

2. 更新阶段（Updating）：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。

3. 卸载阶段（Unmounting）：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

生命周期方法

---

挂载组件触发

1. **componentWillMount **– 在渲染之前执行，在客户端和服务器端都会执行。
2. **componentDidMount **– 在第一次渲染后、在 render 之后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过 this.getDOMNode() 来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

更新组件触发 （这些方法在初始化 render 时不会被调用）

1. **componentWillReceiveProps **– 在组件接收到一个新的 prop (更新后)时被调用。
2. **shouldComponentUpdate **– 返回一个布尔值。在组件接收到新的props或者state时被调用。
3. **componentWillUpdate **– 在组件接收到新的props或者state但还没有render时被调用。
4. **componentDidUpdate **– 在组件完成更新后立即调用。在初始化时不会被调用。

卸载组件触发

1. **componentWillUnmount **– 在组件从 DOM 中移除的时候立刻被调用。

生命周期执行次数

只执行一次： constructor、componentWillMount、componentDidMount

执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

有条件的执行：componentWillUnmount（页面离开，组件销毁时）

不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）