关闭

React生命周期

373人阅读 评论(0) 收藏 举报
分类:

React生命周期


Mounting过程

这里写图片描述

getInitialState

在组件加载完成前执行一次,它的反回值将做为this.state的初始值。

如果使用ES6的语法,这个过程将被定义到constructor中,使用this.state={...}进行初始化。

getDefaultProps

调用一次,当类创建后,如果父组件没有传递this.props则会被做为默认的props。
这个方法调用之前创建的组件将不能使用this.props,此外,对于一个复合组件getDefaultProps()方法反回的props会跨组件共享,且不能复制。

componentWillMount

只执行一次,在这个方法内调用setState将会看到更新后的状态且只会被执行到一次。

利用这一特性可以在这个方法里获取父组件传入的props数据,并使用setState改变视图,随后的用户与组件交互中就不必频繁初始化数据了。

render

render()是必要的方法。
综合使用this.propsthis.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元素等。

完整过程

这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78957次
    • 积分:1195
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:1篇
    • 译文:12篇
    • 评论:6条
    文章分类
    最新评论