React中LifeCycle生命周期详解

Z时代
2024-01-10
分类：综合

react

如图，可以把组件生命周期大致分为三个阶段：

第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；

第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；

第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

更新方式（触发render的4条路径）

在react中，触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的方式。

1、首次渲染Initial Render

2、调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

3、父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）

4、调用this.forceUpdate

下面是我对React组件四条更新路径地总结：

代码如下

class LifeCycle extends React.Component {
constructor(props) {
super(props);
alert("Initial render");
alert("constructor");
this.state = {str: "hello"};
}

componentWillMount() {
alert("componentWillMount");
}

componentDidMount() {
alert("componentDidMount");
}

componentWillReceiveProps(nextProps) {
alert("componentWillReceiveProps");
}

shouldComponentUpdate() {
alert("shouldComponentUpdate");
return true; // 记得要返回true
}

componentWillUpdate() {
alert("componentWillUpdate");
}

componentDidUpdate() {
alert("componentDidUpdate");
}

componentWillUnmount() {
alert("componentWillUnmount");
}

setTheState() {
let s = "hello";
if (this.state.str === s) {
s = "HELLO";
}
this.setState({
str: s
});
}

forceItUpdate() {
this.forceUpdate();
}

render() {
alert("render");
return(
<div>
<span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
<br />
<span>{"State:"}<h2>{this.state.str}</h2></span>
</div>
);
}
}

class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
num: Math.random() * 100
};
}

propsChange() {
this.setState({
num: Math.random() * 100
});
}

setLifeCycleState() {
this.refs.rLifeCycle.setTheState();
}

forceLifeCycleUpdate() {
this.refs.rLifeCycle.forceItUpdate();
}

unmountLifeCycle() {
// 这里卸载父组件也会导致卸载子组件
React.unmountComponentAtNode(document.getElementById("container"));
}

parentForceUpdate() {
this.forceUpdate();
}

render() {
return (
<div>
<a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a>
<a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a>
<a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
<a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
<a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
<LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
</div>
);
}
}

ReactDom.render(
<Container></Container>,
document.getElementById('container')