标签:
什么是生命周期?
组件本质上是一个状态机,输入确定,输出一定确定。
当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应。。
一个组件的生命周期可以概括为
初始化:状态下 可以自定义的函数
object getDefaultProps()
在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props
(使用 in
检测属性)。
该方法在任何实例创建之前调用,因此不能依赖于 this.props
。另外,getDefaultProps()
返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。
object getInitialState()
在组件挂载之前调用一次。返回值将会作为 this.state
的初始值。
componentWillMount()
服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用setState
,render()
将会感知到更新后的 state,将会执行仅一次,尽管 state 改变了。
componentDidMount()
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个 DOM 展现,你可以通过 this.getDOMNode()
来获取相应 DOM 节点。
如果想和其它 JavaScript 框架集成,使用 setTimeout
或者 setInterval
来设置定时器,或者发送 AJAX 请求,可以在该方法中执行这些操作。
运行中:状态下 可以自定义的函数
componentWillReceiveProps(object nextProps)
在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
用此函数可以作为 react 在 prop 传入之后, render()
渲染之前更新 state 的机会。老的 props 可以通过 this.props
获取到。在该函数中调用 this.setState()
将不会引起第二次渲染。
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
boolean shouldComponentUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate
方法的时候也不会。
如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false
。
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
如果 shouldComponentUpdate
返回 false,则 render()
将不会执行,直到下一次 state 改变。(另外,componentWillUpdate
和 componentDidUpdate
也不会被调用。)
默认情况下,shouldComponentUpdate
总会返回 true,在 state
改变的时候避免细微的 bug,但是如果总是小心地把 state
当做不可变的,在 render()
中只从 props
和state
读取值,此时你可以覆盖 shouldComponentUpdate
方法,实现新老 props 和 state 的比对逻辑。
如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用 shouldComponentUpdate
可以提升应用的性能。
componentWillUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
使用该方法做一些更新之前的准备工作。
componentDidUpdate(object prevProps, object prevState)
在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。
使用该方法可以在组件更新之后操作 DOM 元素。
销毁:状态下 可以自定义的函数
componentWillUnmount()
在组件从 DOM 中移除的时候立刻被调用。
在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount
中创建的 DOM 元素。
总结:组件的生命周期下可以自定义的函数大致有这些了。。我们下期再见
标签:
原文地址:http://www.cnblogs.com/tomblog/p/4771151.html