React组件周期
React的组件拥有自身的生命周期。这是一个通过精心设计过的,通过钩子函数来进行对组件进行渲染的过程。
React的组件有以下的生命周期:
- 实例化
- 存在期
- 销毁&清理期
实例化
实例化过程中视情况调用的方法会有不同:初次实例化,和后续实例化过程中存在差异。
初次实例化调用
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
后续实例化
- getInitialState
- componentWillMount
- render
- componentDidMount
初次实例化和后续实例化的差异
getDefaultProps在后续实例化过程中不会被调用.
存在期
存在期不像实例化存在情景不同,它是持续不变的,它依次调用以下方法:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁期
销毁期仅有一个钩子函数:
- compoentWillUnmount
各个方法的简单说明
getDefaultProps
这个方法仅会被调用一次。对那些在父元素上没有设置props的新建组件来说,这是唯一的设定默认值机会。
getInitialState
这个方法和getDefaultPorps不同,它会在每个实例创建时都调用一次。这这里有个地方要注意:
- 这里已经可以访问到this.props
- 这是一个初始化state的机会
componentWillMount
组件即将进行渲染前调用一个方法,这是组件渲染前最后一次进行state修改的机会。
render
这个方法是必须有的,也是大家用到的最常见最频繁的方法。它会创建一个虚拟DOM,而不是一个真实的DOM。这里有几个地方要注意:
- 通过且之能通过this.props和this.state来访问数据
- 返回null,false或者react组件
- 只能出现一个顶级组件
- 纯净,只做渲染,绝不修改state和dom的输出
componentDidMount
DOM被渲染到浏览器以后调用的方法。这是一个非常有用的方法,尤其是当你打算把诸多现有组件、插件之类和React一起混用时。他相当于DOMReady。
如果你还是不懂的话,我只好祭出杀招:你的各种jQuery插件调用可以放到这里。
componentWillReceiveProps
当组件处于存在期时候,任何时候都可以通过改变父元素来更改组件的props。当父元素进行这种改变时候,这个方法会被调用,在这里我们可以对props和state进行修改。