react 组件生命周期

来源：互联网发布：nat穿越java实现编辑：程序博客网时间：2024/06/06 20:09

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<script type="text/javascript" src="./build/react.min.js" charset="utf-8"></script>

<script type="text/javascript" src="./build/react-dom.min.js" charset="utf-8"></script>

<script type="text/javascript" src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>

<div id="react-container">

</div>
</body>


<script type="text/babel">
var container = document.getElementById("react-container");
/*
* 生命周期介绍
* 1、组件的生命周期可以分为三个状态:
Mounting: 组件挂载,已插入真实DOM
Updating: 组件更新,正在被重新渲染
Unmounting: 组件移出,已移出真实 DOM
2、组件的生命周期可分为四个阶段:创建、实例化、更新、销毁
*/

/*
1、Mounting/组件挂载相关:
(1) componentWillMount 组件将要挂载。在render之前执行,但仅执行一次,即使多次重复渲染改组件，或者改变了组件的state
(2) componentDidMount 组件已经挂载。在render之后执行，同一个组件重复渲染只执行一次

2、Updating/组件更新相关:
(1) componentWillReceiveProps(object nextProps) 已加载组件收到新的props之前调用,注意组件初始化渲染时则不会执行
(2) shouldComponentUpdate(object nextProps,object nextState) 组件判断是否重新渲染时调用。该接口实际是在组件接收到了新的props或者新的state的时候会立即调用，然后通过
(3) componentWillUpdate(object nextProps,object nextState) 组件将要更新
(4) componentDidUpdate(object prevProps,object prevState) 组件已经更新

3、 Unmounting/组件移除相关:
(1) componentWillUnmount 在组件要被移除之前的时间点出发,可以利用该方法来执行一些必要的清理组件将要的移除

4、生命周期中与props和state相关:
(1) getDefaultProps 设置props属性默认值
(2) getInitialState 设置state属性初始值
*/

/*
* 生命周期介绍
*/
var Demo = React.createClass({
/*
一、创建阶段
流程 :
getDefaultProps
*/
getDefaultProps:function(){
//创建类的时候被调用,设置this.props的默认值
console.log("设置this.props的默认值-getDefaultProps");
return{};
},

/*
二、实例化阶段
流程 :
getInitialState
componentWillMount
render
componentDidMount
*/
getInitialState:function(){
// 设置this.state的默认值
console.log("设置this.state的默认值-getInitialState");
return null;
},
componentWillMount:function(){
// 在render之前调用
console.log("在render之前调用-componentWillMount");
},
render:function(){
// 渲染并返回一个虚拟DOM
console.log("渲染并返回一个虚拟DOM-render");
return (
<div>Hello World</div>
);
},
componentDidMount:function(){
// 在render之后调用
// 在该方法中,React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
console.log("在render之后调用-componentDidMount");
},

/*
三、更新阶段
流程 :
componentWillReceiveProps
shouldComponentUpdate 如果返回值是false,后三个方法不执行
componentWillUpdate
render
componentDidUpdate
*/
componentWillReceiveProps:function(){
console.log("已加载组件收到新的props之前调用-componentWillReceiveProps");
},
shouldComponentUpdate:function(){
// 是否需要更新
console.log("是否需要更新-shouldComponentUpdate");
return false;
},
componentWillUpdate:function(){
console.log("组件将要更新-componentWillUpdate");
},
componentDidUpdate:function(){
console.log("组件已经更新-componentDidUpdate");
},

/*
四、销毁阶段
流程 :
componentWillUnmount
*/
componentWillUnmount:function(){
console.log("销毁-componentWillUnmount");
}
});
// 第一次挂载
ReactDOM.render(<Demo />,container);
// 移除组件
ReactDOM.unmountComponentAtNode(container);
// 重新渲染
ReactDOM.render(<Demo />,container);
</script>
</html>

阅读全文

0 0