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方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。