React组件的生命周期

1.React为每一个组件提供了生命周期钩子函数去响应不同的时刻——创建是、存在期及销毁时。

我们在这里按照这些时刻出现的顺序依次介绍——从实例化开始到活动期、直到最后被销毁。

2.生命周期方法

React组件拥有简洁的生命周期API,它仅仅提供你所需要的方法,为不会去追求全面。

3.实例化:

一个实例初次被创建是所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同。当你首次使用一个组件类时,你会看到下面这些方法依次被调用。

getDefaultProps,

getInitialState,

componentWillMount.

render

componentDidMount

对于该组件类的所有后续应用,你将会看到下面的方法依次被调用。注意,getDefaultProps方法已经不在列表中。

getInitialState,

componentWillMount.

render

componentDidMount

4.存在期

随着应用状态的改变,以及组件逐渐受到影响,你将会看到下面的方法依次被调用:

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

5.销毁&清理期

最后当组件被使用完成后,componentWillUnmount方法将会被调用,目的是给这个实例提供清理自身的机会。

现在我们将会依次详细介绍这三个阶段:实例化、存在期及销毁&清理期。

6.依次详细介绍这三个阶段:实例化、存在期及销毁&清理期。

1)实例化:

当每一个新的组件被创建、首次渲染时,有一系列的方法可以用来为其做准备工作。这些方法中每一个都由明确的职责

getDefaultProps

对于组件来说,这个方法只会被调用一次,对于那些没有被父辈组件指定props属性的新建实例来说,这个方法返回的对象可用于为实例设置默认的props的值

getInitialState

对于组件的每个实例来说,这个方法的调用次数有且只有一次。在这里你将有机会初始化每个是的state。于getDefaultProps方法不同的是,每次实例创建时该方法都会被掉调用一次,在这个方法里,你已经可以访问到this.props

componentWillmount

该方法在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。

render

在这里将会创建一个虚拟DOM,用来表示组件的输出,对于一个组件来说,render是唯一一个必须的方法,并且有特定的规则,render方法需要满足下面几点:
只能通过this.props和this.state访问数据

可以返回null、false、或者任何react组件

可能出现一个顶级组件(不能返回一组元素)

必须纯净,意味着不能改变组件的状态或者修改DOM的输出

render方法返回的结果不是真正的DOM,而是一个虚拟的表现,React随后会把它和真是的DOM做对比,来判断是否有必要做出修改。

componentDidMount

在render方法成功调用并且真是的DOM已经被渲染之后,你可以在componentDidMount内部通过this.getDOMNode方法访问到它

这就是你可以用来访问原始DOM的生命周期钩子

2)存在期:
componentWillReceiveProps

在任意时刻,组件的props都可以通过父辈组件来修改。出现这种情况时,componentWillReceiveProps方法会被调用,你将会获得更改props对象及更新state的机会

shouldComponentUpdate

react非常快,不过你可以让他更快,通过调用shouldComponentUpdate方法在组件渲染是进行精确优化。

如果你确定某个组件或者它的任何组件不需要渲染新的props或者state,则该方法火返回false

返回false则是在告诉react要跳过render方法,以及位于render前后的钩子函数:componentWillUpdate和componentDidUpdate

该方法是非必须的,并且大多数情况下没必要在开发中使用它,草率的使用它可能导师不可思议的bug,所有最好等到能够准确的测量出应用的瓶颈后,再去选择在何处进行恰当的优化。

 

如果你谨慎的使用了不可改变的数据结构作为state,同时在render方法中读取props和state中的数据,那你就可以放心地慎重写shouldComponentUpdate方法来比较新旧props及state,

 

另外一个关于性能优化的选项是React插件提供的PureRenderMinxin方法。如果你的组件是纯净的,即对于相同的props和state,它总会渲染出一样deDOM,那么这个mixin会自动调用shouldComponnetUpdate方法来比较props和state,如果结果一直则返回false。

componentWillUpdate

和componentWWillMount方法类似,组件会接收到新的props和state进行渲染之前,调用该方法

注意:你不可以在该方法中更新state或者props,为因该借助componentWillReceiveProps方法在运行时更新state。

componentDidUpdate

和componentDidMount方法类似,该方法给我们更新已经渲染好的DOM的机会。

3)销毁&清理期:

每当React使用完一个组件,这个组件就必须从DOM中卸载随后被销毁。此时,仅有的一个钩子函数会做出响应,完成所有的清理和销毁工作,这很必要。

componentWillUnmount

最后,随着一个组件从他的层级结构中移除,这个组件的声明也走到了尽头。该方法会在组件被移除之前被调用,让你有机会做一些清理工作,你在componentDidMount方法中添加所有任务都需要在该方法中撤销,比如创建的定时器或者添加的事件监听器。

 

6.总结:

React生命周期方法提供了精心设计的钩子函数,会伴随组件的整个生命周期。状态机类似,每个组件都被设计成了能够在整个生命周期输出稳定、语义化的标签。

组件不会独立存在,随着父组件将props推送给它们的子组件,以及那些子组件渲染它们自身的子组件,你必须谨慎地考虑吧数据是如何流经整个应用的,每个子组件真正需要掌控多少数据,哪个组件来控制应用的状态。

 

posted @ 2017-06-28 09:26  gz_blog  阅读(147)  评论(0编辑  收藏  举报