Paste_Image.png
1、getIntialState()方法
这个方法在组件没有mouting之前调用，在这个方法中可以初始化一些数据，例如state。这个方法在组件创建的时候调用一次，之后就不会再被调用了，除非组件销毁，重新创建。
在这个方法中已经可以访问到this.props了。
getDefaultProps()方法
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
2、componentWillMount()方法
这个方法在组件已经即将创建但是还没有创建的时候调用，在这里可以用setState修改state。但是react建议是在组件mouted以后调用setState函数，否则容易报警告。这点在介绍state的时候在详细分析。
3、render方法
这个方法是react组件唯一必需的函数，这个方法用于创建虚拟DOM。
这个方法里数据只能通过this.state和this.props输出。
要注意一点返回的组件必须有一个顶级的组件，也就是说所有的标签必须被一个父标签包裹。
4、componentDidMount()方法
组件真正在被装载之后，可以修改DOM
这个方法中可以调用Rect.findDOMNode()方法，访问Dom节点（注：在react 0.13版本中用this.getDOMNode()方法而且返回的是虚拟DOM，不能直接访问DOM节点）
访问DOM节点时，react 提供了refs对象，可以同个refs对象直接访问到相应的节点上：
例如：
<div ref='app'></div>
可以通过Rect.findDOMNode(this.refs.app)直接访问到div节点
5.componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
console.log(this.props.color);//原来的颜色
console.log(nextProps.color);//将要变成的颜色
}
6.shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
shouldComponentUpdate:function (nextProps,nextState) {
console.log(nextProps,'nextProps');
console.log(nextState,'nextState');
return false;
}
7.componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
8.componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
9.componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。
网友评论