目录
本章节将讨论一下React的生命周期
组建的生命周期可以分为三个状态:
- Mounting(挂载):已经插入真实的Dom
- Updating(更新):正在被重新渲染的状态
- Unmounting(卸载):已经移除真实的Dom
看下面一张图,网址在这里
挂载
当组件被创建并插入在Dom中的时候,调用生命周期的顺序如下:
constructor(): 在 React 组件挂载之前,会调用它的构造函数。
child render():渲染过程中遇到Child组件 输出child render()
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后(插入 DOM 树中)立即调用。
注意:render() 方法是 class 组件中唯一必须实现的方法,其他方法可以根据自己的需要来实现。
更新
每次当组件中的state或者是props发生变化时,组件就会重新进行更新。
触发更新时,组件更新的生命周期调用顺序如下:
getDerivedStateFromProps(): 在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate():当 props 或 state 发生变化时,shouldComponentUpdate() 会在渲染执行之前被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate(): 在最近一次渲染输出(提交到 DOM 节点)之前调用。
componentDidUpdate(): 在更新后会被立即调用。
注意: render() 方法也是 class 组件中唯一必须实现的方法,其他方法可以根据自己的需要来实现。
卸载
当组件从 DOM 中移除时会调用如下方法:
componentWillUnmount(): 在组件卸载及销毁之前直接调用。
下面是演示代码 :
index.js部分
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
// constructor钩子函数 初始化state或处理this
constructor() {
super();
console.log("constructor()");
this.state = {
num: 0,
};
// this.add = this.add.bind(this)
}
//
render() {
console.log("render()");
// 注意 不能调用setState
// this.setState({
// })
return (
<>
{this.state.num !== 2 ? <Child num={this.state.num} /> : <h1>hello</h1>}
<button onClick={this.handleClick}>+1</button>
</>
);
}
handleClick = () => {
this.setState({
num: this.state.num + 1,
});
//this.forceUpdate();
};
// 组件挂载后触发 进行dom操作或发送ajax请求
componentDidMount() {
console.log("componentDidMount()");
}
}
class Child extends Component {
render() {
console.log("child render()");
return <h1 id="app">welcome to beijing {this.props.num}</h1>;
}
componentDidUpdate(prevProps) {
console.log(
"child componentDidMount()",
document.getElementById("app").innerHTML
);
// 不能直接用 this.setState({});
// 假如使用 setState() 配合if语句
console.log(prevProps); // 更新前props属性值
if (prevProps.num !== this.props.num) {
this.setState({});
}
}
// 卸载阶段钩子函数-执行资源清理工作如关闭定时器。事件解绑等
componentWillUnmount() {
console.log("componentWillUnmount()");
}
}
ReactDOM.render(<App />, document.getElementById("root"));
第一次页面显示的生命周期有
当点击按钮时出现的效果有:
再次点击更新时:
再次点击:
总结如下:
第一次渲染App组件 先执行constructor钩子函数输出constructor() 然后执行render输出render(),渲染过程中遇到Child组件 输出child render()把子组件挂载阶段的钩子函数执行完毕 执行父组件的componentDidMount()
点击按钮,父组件状态num被改变,引起父组件重新渲染render()->子组件也会更新child render()->child componentDidMount() ,{num: 0},条件成立 执行setState()->child render()->child componentDidMount() {num: 1} 条件不成立 不会执行setState