React生命周期
Mounting过程
getInitialState
在组件加载完成前执行一次,它的反回值将做为this.state
的初始值。
如果使用ES6的语法,这个过程将被定义到
constructor
中,使用this.state={...}
进行初始化。
getDefaultProps
调用一次,当类创建后,如果父组件没有传递this.props
则会被做为默认的props。
这个方法调用之前创建的组件将不能使用this.props
,此外,对于一个复合组件getDefaultProps()
方法反回的props会跨组件共享,且不能复制。
componentWillMount
只执行一次,在这个方法内调用setState
将会看到更新后的状态且只会被执行到一次。
利用这一特性可以在这个方法里获取父组件传入的props数据,并使用setState改变视图,随后的用户与组件交互中就不必频繁初始化数据了。
render
render()是必要的方法。
综合使用this.props
和this.state
并反回一个单独的子元素,子元素可以是通常的DOM标签或我们定义的React组件,也可以只反回null或false来表示你不想渲染任何东西,并且ReactDOM.findDOMNode(this)
将反回null。保持这个方法的纯净,任何有复作用的操作可以放到componentDidMount()
或其它生命周期函数中。
componentDidMount
调用一次,在render之后,这时你可以通过ref来访问所有你的子节点Dom对象了,可以在这里整合其它JavaScript框架,设置定时器,或发送AJAX请求。
Updating过程
componentWillReceiveProps
当组件接收到新的props时被调用。这个方法在初始化时是不会被调用的。
在渲染之前,我们可以通过this.props
取得老的props,并可以在这个方法中使用this.setState()
更新state且不会触发额外的渲染。
shouldComponentUpdate
当开始收到新的state或props时调用。当初使化render或forceUpdate时不会被调用。
当你却信不需要更新组件时,可以使这个方法反回false来阻止下一次的渲染发生。
componentWillUpdate
当已经获得新的state或props时在渲染之前被调用。这个方法在初使化时不会调用。
componentDidUpdate
在组件更新的DOM后执行。初始化时不会被调用。
可以在这个方法中操作真实的DOM元素。
Unmounting 过程
componentWillUnmount
当组件从DOM中移除前被调用。
可以在这个方法中执行一些必要的清理如,解除定时器,清理在componentDidMount
时创建的DOM元素等。