react.js 从零开始（二）组件的生命周期

什么是生命周期？

组件本质上是一个状态机，输入确定，输出一定确定。

当状态改变的时候 会触发不同的钩子函数，可以让开发者做出响应。。

一个组件的生命周期可以概括为





初始化：状态下 可以自定义的函数

getDefaultProps

object getDefaultProps()

在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到

this.props

（使用

in

检测属性）。

该方法在任何实例创建之前调用，因此不能依赖于

this.props

。另外，

getDefaultProps()

返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。

getInitialState

object getInitialState()

在组件挂载之前调用一次。返回值将会作为

this.state

的初始值。

componentWillMount

componentWillMount()

服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用

setState

，

render()

将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

componentDidMount

componentDidMount()

在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过

this.getDOMNode()

来获取相应 DOM 节点。

如果想和其它 JavaScript 框架集成，使用

setTimeout

或者

setInterval

来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。

运行中：状态下 可以自定义的函数

componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。

用此函数可以作为 react 在 prop 传入之后，

render()

渲染之前更新 state 的机会。老的 props 可以通过

this.props

获取到。在该函数中调用

this.setState()

将不会引起第二次渲染。

componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}

[/code]

shouldComponentUpdate

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

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

使用该方法做一些更新之前的准备工作。

componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

使用该方法可以在组件更新之后操作 DOM 元素。

销毁：状态下 可以自定义的函数

componentWillUnmount

componentWillUnmount()

在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理，比如无效的定时器，或者清除在

componentDidMount

中创建的 DOM 元素。

总结：组件的生命周期下可以自定义的函数大致有这些了。。我们下期再见