React 学习总结（二）-组件
2017-06-26 本文已影响0人
云飘雾散
上篇文章介绍了有关React基本知识，这篇文章主要介绍React的组件部分，组件即封装起来的具有独立功能的UI部件，它也是React核心部分。React组件由三部分组成-属性（props）、状态（state）以及生命周期方法。
React组件的数据分为两种，prop和state，无论prop或者state的改变，都可能引发组件的重新渲染。prop是组件对外接口，state是组件内部状态。
React组件可分为3个状态：
- Mounting：组件第一次在DOM树中渲染的过程；
- Updating：组件被重新渲染的过程；
- Unmounting：组件从DOM树中删除的过程。
React 为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数：
componentWillMount() :在渲染前调用,在客户端也在服务端
componentDidMount() : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillUpdate():在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate():在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount():在组件从 DOM 中移除的时候立刻被调用。
此外，React 还提供两种特殊状态的处理函数：
componentWillReceiveProps(): 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate(): 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
组件生命周期流程图.png
下面通过一些代码看看在浏览器中组件的生命周期的执行顺序：
<!DOCTYPE html>
<html>
<head>
<title>组件生命周期</title>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var count = 0;
var HelloWorld = React.createClass({
//初始化组件属性
getDefaultProps:function(){
console.log(" getDefaultProps : 1 ");
},
//初始化组件状态
getInitialState:function(){
console.log(" getInitialState : 2 ");
return {
name:'Tom'
};
},
handleChange:function(event){
++count;
console.log(' handleChange函数被执行第' + count + '次' );
this.setState({name:event.target.value});
},
//初始渲染组件之前
componentWillMount:function(){
console.log(" componentWillMount : 3 ");
},
//render函数并不做实际的渲染动作，它只负责返回一个JSX描述的结构，最终由React来操作渲染过程。
render:function(){
console.log(" render : 4 ");
return (<div>
<input type="text" onChange={this.handleChange} value={this.state.name}></input>
<span>{this.state.name}</span>
</div>);
},
//初始渲染组件之后（初始render之后）,通知组件已经加载完成
componentDidMount:function(){
console.log(" componentDidMount : 5 ");
},
//组建是否被更新，当组件接收到新的属性（props）和状态（state）改变的话，都会触发
shouldComponentUpdate:function(){
console.log(" shouldComponentUpdate : 6 ");
return true;
},
//如果组件状态或者属性改变，并且上面的 shouldComponentUpdate() 返回为 true，就会开始准备更新组件，并调用 componentWillUpdate()
componentWillUpdate:function(){
console.log(" componentWillUpdate : 7 ");
},
//调用了 render() 更新完成界面之后
componentDidUpdate:function(){
console.log(" componentDidUpdate : 8 ");
}
});
ReactDOM.render(<HelloWorld/>,document.getElementById("container"));
</script>
</body>
</html>```
>我们可以在浏览器控制台看到，当组件第一次被渲染时：
>当我们通过出发input的onChange(）函数时即触发setState(),组件的状态发生改变，组件执行顺序如下图所示：
>有上面两幅图对比，我们知道：当state发生改变时
1.MountComponent只会在初始化的时候被触发；
2.render函数可以多次被触发；
3.UpdateComponent被触发。
