第七讲 React的生命周期
本帖最后由 Sian 于 2017-12-25 23:15 编辑1、生命周期的三个状态：
1.1、Mounting：组件挂载，已插入真实DOM
1.2、Updating：组件更新，正在被重新渲染
1.3、Unmounting：组件移除，已移出真实DOM
2、四个阶段，分别是：创建阶段-->实例化阶段-->更新阶段-->销毁阶段
3、相关方法
3.1、Mounting/组件挂载相关：
[*]componentWillMount
组件将要挂载，在render之前执行，但仅执行一次！
[*]componentDidMount
组件已经挂载，在render执行之后，同样只执行一次！
3.2、Updating/组件更新相关：
[*]componentWillReveiveProps
已经加载的组件在接收新(非初始化，而是更新)的属性时调用
[*]shouldComponentUpdate
在接收到新的state或prpos时调用，返回bool值决定下面两个方法是否执行
[*]componentWillUpdate
[*]componentDidUpdate
3.3、Unmounting/组件移除相关
[*]componentWillUnmount
4、实例
4.1、创建阶段
[*]getDefaultProps
[*]4.2、实例化阶段
[*]getInitialState
[*]componentWillMount
[*]render
[*]componentDidMount
4.3、更新阶段
[*]componentWillReceiveProps
[*]shouldComponentUpdate
[*]componentWillUpdate
[*]render
[*]componentDidUpdate
4.4、销毁阶段
[*]componentWillUnmount
5、代码演示
/**
* React生命周期
1、三个状态：
Mounting：组件挂载，已插入真实DOM
Updating：组件更新，正在被重新渲染
Unmounting：组件移除，已移出真实DOM
2、四个阶段，分别是：创建阶段-->实例化阶段-->更新阶段-->销毁阶段
3、相关方法
3.1、Mounting/组件挂载相关：
A>componentWillMount
组件将要挂载，在render之前执行，但仅执行一次，即使多次重复渲染或改变state也只执行一次
B>componentDidMount
组件已经挂载，在render执行之后，同一个组件重复渲染只执行一次
3.2、Updating/组件更新相关：
A>componentWillReceiveProps
已加载组件将要接收到新的props之前调用(更新)，组件初始化时不会执行！
B>shouldComponentUpdate
组件接收到的新的props或state时执行，返回bool值来决定是否更新，并决定下面两个方法是否执行
C>componentWillUpdate
组件将要更新
D>componentDidUpdate
组件已经完成更新
3.3、Unmounting/组件移除相关方法
A>componentWillUnmount
组件将要被移除时调用，用来执行一些必要的清理工作
3.4、生命周期中props与state相关
A>getDefaultProps 设置Props的默认属性值
B>getInitialState 设置state的默认属性值
4、代码示例
*/
var Demo = React.createClass({
/**
* 一、创建阶段
1、getDefaultProps方法
*/
getDefaultProps:function(){
console.log("getDefaultProps");
return{};
},
/**
* 二、实例化阶段
1、getInitialState
2、componentWillMount
3、render
4、componentDidMount
*/
getInitialState:function(){
console.log("getInitailState");
return {
name : "sian"
}
},
componentWillMount:function(){
console.log("componentWillMount");
},
render:function(){
console.log("render");
var text = this.state.name;
return <p>Hello {text}!</p>;
},
componentDidMount:function(){
console.log("componentDidMount");
},
/**
* 三、更新阶段
1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate
*/
componentWillReceiveProps:function(){
console.log("componentWillReceiveProps");
},
shouldComponentUpdate:function(){
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate:function(){
console.log("componentWillUpdate");
},
componentDidUpdate:function(){
console.log("componentDidUpdate");
},
/**
* 四、销毁阶段
1、componentWillUnmount
*/
componentWillUnmount:function(){
console.log("componentWillUnmount");
}
});
console.log("第一次创建并加载组件");
ReactDOM.render(
<Demo />,
document.getElementById("container")
);
console.log("重新渲染组件");
ReactDOM.render(
<Demo />,
document.getElementById("container")
);
console.log("销毁组件");
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
5.1、控制台输出的结果为：getDefaultProps
第一次创建并加载组件
getInitailState
componentWillMount
render
componentDidMount
重新渲染组件
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁组件
componentWillUnmount
6、在线效果演示：http://www.yusian.com/react/lifecycle/index.html
页:
[1]