您的位置：首页 > Web前端 > React

React中组件的生命周期

2016-12-22 12:00 399 查看

1、先创建项目编写代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--react.js是React的核心库-->
<script src="./build/react.js" charset="utf-8"></script>
<!--react-dom.js的作用是提供与DOM相关的功能-->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!--browser.min.js的作用是JSX语法转换成JavaScript语法-->
<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
<!--React渲染的模板内容会插入到这个DOM节点中，也可以理解为一个容器-->
<div id="container">

</div>
</body>
<!--在React开发中，使用JSX,跟JavaScript不兼容，所以在使用JSX的地方需要设置type="text/babel"-->
<!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">

//在此处编写React代码
/**
生命周期介绍：

1、组件的生命周期一般可以分为三个状态：
Mounting:组件挂载，组件渲染完成了，已插入真实DOM
Updating:组件更新，正在被重新渲染
Unmounting: 组件移出，已移出真实DOM

2、组件的生命周期可以分为四个阶段：
创建、实例化、更新、销毁

3、举例：网易新闻列表页面，
**/

/**
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("getDefaultProps");
return {};
},

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

/**
三、更新阶段
流程:
componentWillReceiveProps
shouldComponentUpdate  如果返回值是false，后三个方法不执行
componentDidUpdate
render
componentDidUpdate
**/
componentWillReceiveProps:function(){
//
console.log("componentWillReceiveProps");
},
shouldComponentUpdate:function(){
//是否需要更新
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate:function(){
console.log("componentWillUpdate");
},
componentDidUpdate:function(){
console.log("componentDidUpdate");
},

/**
四、销毁阶段
流程：
componentWillUnmount
**/
componentWillUnmount:function(){
console.log("componentWillUnmount");
}
});

//第一次创建并加载组件
ReactDOM.render(
<Demo />,
document.getElementById("container")
);

//重新渲染组件
ReactDOM.render(
<Demo />,
document.getElementById("container")
);

//移除组件
// ReactDOM.unmountComponentAtNode(document.getElementsByClassName("container"));
</script>
</html>

在上述代码中shouldComponentUpdate返回为true,则下面的三个方法都会执行，运行程序将可以看到：

当将shouldComponentUpdate返回为false时，下面的方法将不会执行，但是如果有移除组件的方法存在的时候，移除组件的方法将会执行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航