Que's Blog

WebFrontEnd Development

0%

React实践系列一 组件生命周期

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进行修改。

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

compoentWillUnmount