浅析 React 生命周期

Overview

最近常有学习React相关的技术,写了几个React的小Demo,使用 React/Express 技术栈。实在太小,羞于拿出来细说。React 的确是一个值得追随的技术。但React体系实在庞大,我目前仅略知一二。这里要挑出来说的,是React的生命周期机制。Demo的学习过程中,对它的方便、易用之处实在是深有体会,在一些细节处也值得斟酌,在这里做一下记录,便于分享。

如果你接触过React,大概对rendercomponentWillMount等,会相对的熟悉,因为它们再常用不过。但用归用,其中的一些理论上的细节,往往容易在使用的过程中被忽略,使我们多敲了不少代码,心很累的 : )

通俗来讲,React 将组件 component 在web中的形成、修改和渲染等划分为若干个阶段,组成组件的生命周期。在一个完整的生命周期内,一个组件会经过若干个阶段,在特殊的阶段组件会调用一个特别的lifecycle method,即生命周期方法。如下:

  1. constructor(props)
  2. componentWillMount()
  3. render()
  4. componentDidMount()
  5. componentWillReceiveProps(nextProps)
  6. shouldComponentUpdate(nextProps, nextState)
  7. componentWillUpdate(nextProps, nextState)
  8. render( )* //理解上与3. render()略有不同,见下。
  9. componentDidUpdate(prevProps, prevState )
  10. componentWillUnmount( )

值得注意,这些生命周期是React 内置的,在特定条件下就会被调用。而开发者可以做的就是 override(重载)这些方法,以实现想要的功能。

constructor

constructor(props),组件形成时调用。

constructor 函数可理解为组件的构造函数,从组件的类(class) 实例化一个组件实例。这个函数在组件形成时被调用,是所有生命周期函数中最先执行的。在constructor函数内,如有必要,进行state的初始化以及绑定方法;否则可以省去constructor函数的声明。

有以下几点在开发时值得注意:

  1. constructor 函数内,在执行任何statement之前,必须是super() 函数,如果有参数须将参数带上。这点跟Java很像。
  2. 在constructor 函数内,this.props 返回 undefined
  3. 不要在初试化state时引用props 里的值,否则每当props更新时,都需要在componentWillReceiveProps 函数内对state进行更新。(同时这也涉及到组件state选取的原则,如有需要请阅读Thinking in React

componentWillMount

componentWillMount(),在组件首次渲染(render)之前调用。

mount安装之意,我们可以理解为组件首次被加载在web中。因此每次页面加载/刷新,或者某个组件第一次加载进入web时可以调用componentWillMount( ) 函数。举个例子,在首次进入文章列表时时,可在 componentWillMount 对所有文章进行查询。这样,在render之前,就能拿到所有文章的数据,以便在render中使用。

在componentWillMount ( ) 函数内,若对this.state进行更新,无法触发重新渲染组件。

Render

render()

render 即 渲染函数,是编写组件代码时,唯一一个必须的函数。该函数须有返回值,返回一个组件,即最终渲染出来的组件。在使用组件的class进行组件实例化时,得到的便是其返回值。

返回值有两种类型:

  1. 一个父标签,这个父标签内可以包含若干个子标签,在最外层标签必须只有一个。
  2. false 或者 null,代表不渲染任何DOM

注意:在render函数中只做与返回组件相关的工作,勿在其中对state进行操作,可以保证每次调用render函数,返回的组件都是相同的。否则将加大项目维护成本。

另外,如果shouldComponentUpdate函数返回false,则不执行render函数。关于shouldComponentUpdate将在下面介绍。

componentDidMount

componentDidMount(),一旦组件首次加载完成,便会调用

如果需要对渲染出来的DOM节点做任何操作,可以在此处进行。(提示: this.refs 可获取真实DOM)。

在该组件内设置state将会导致组件被重新渲染。

上面对 React生命周期函数中的constructor / componentWillMount / render / componentDidMount 四个函数进行了介绍。下面将继续介绍另外5个方法。在此之前,先总结一下,下面列表中列出的3.render()8.render()的在逻辑上的区别和联系。先上一个列表。

  1. constructor(props)
  2. componentWillMount( )
  3. render( )
  4. componentDidMount( )
  5. componentWillReceiveProps(nextProps)
  6. shouldComponentUpdate(nextProps, nextState)
  7. componentWillUpdate(nextProps, nextState)
  8. render()*
  9. componentDidUpdate(prevProps, prevState)
  10. componentWillUnmount()

「两个」render( )方法的区别

3.render( ) 与 8.render( )*

实质上,这两个方法毫无区别。但这里为什么要提及它们之间的区别呢?其实,它们只是同一函数 render( ) 在组件生命周期的两个不同阶段的不同理解而已。

前一个 render( ) 方法指在组件第一次被加载进入页面时,调用的 render( ) 方法;后一个则指除去第一次,之后调用的 render( ) 方法。

因此,我们更愿意称第一次的 render( ) 方法为 mount( 安装 ),称后一个 render( ) 方法为 re-render ( 重新渲染 ) 。这也是为什么组件首次 render 前后的方法名中带有mount一词的缘故了。

这是 React 的伎俩,或者设计哲学吧。怎么认为都行,我认为很有趣😄

下面介绍的方法,都是围绕第二个 render( ) ,即重新渲染 re-render 展开的。

componentWillReceiveProps

componentWillReceiveProps(nextprops)已加载的组件在 props 发生变化时调用。

如果需要通过监听 props 的改变来修改 state 的值,则可以通过重载该函数实现。

需要注意,在有些情况下,组件的 props 未发生改变也会调用该函数。因此如果在该函数内的逻辑,只是想捕获当前 props 与 接收的 nextProps 的不同来做出一些操作,则最好先将 props 与 nextProps 进行比较。

1.在mounting阶段,即首次 render ,不调用 componentWillReceiveProps 方法。理解了两个 render( ) 的不同,便知道这里是为什么了。

2.this.setState({…}) 不触发 componentWillReceiveProps 方法。因为该方法只监听 this.props 的改变,不关心 this.state 值的变化。

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

返回 true orfalse

要不要更新(重新渲染)组件?浅显易懂。这个方法的返回值决定了,当 props 或者 state 值发生变化时,组件是否重新渲染。两种情况:

  1. 返回true,重新渲染。紧接着,继续执行 componentWillUpdate()render()componentDidUpdate()
  2. false,不重新渲染。不再执行任何生命周期函数函数(亦不执行该组件的 render( ) 函数)。但是,并不妨碍其子组件。也就是说,如果其子组件的 props 或 state 发生改变时,只会取决于那个组件的 shouleComponentUpdate ( ) 方法的返回值。道理虽懂,但遇到是可能会犯迷糊,因为开发中常常会遇见组件嵌套的情况,父子组件之间传递同一套 props 或 state,一来二去,谁更新谁不更新,容易迷糊,需要仔细咯。
  1. 在绝大部分情况下,当 props 或 state 改变时,都是需要重新渲染组件的。
  2. 注意,根据 React 官方 的说法,就算 shouldComponentUpdate( ) 方法返回 false,组件也会重新渲染。需要随时注意官方文档的变化。

componentWillUpdate

componentWillUpdate(nextProps, nextState),当 shouldComponentUpdate( ) 方法返回 true 后调用。

这个方法提供了一个为重新渲染作准备的机会,意思是要在这里,趁接下来的 render( ) 方法重新渲染之前,完成该完成的操作。这个方法在 mount 阶段不会被调用,只在 re-render 阶段被调用。

注意,不要在该方法内调用 this.setState({…}),如有需要,请在 componentWillReceiveProps( ) 方法中完成。养成良好的编程规范。

componentDidUpdate

componentDidUpdate(prevProps, preState),一旦组件首次更新(重新渲染)完成时调用。

因此像 componentDidMount( ) 一样,如果需要对渲染出来的DOM节点做任何操作,可以在此处进行。(提示: this.refs 可获取真实DOM)。

在该组件内设置state将会导致组件被重新渲染。

componentWillUnmount

componentWillUnmount(),在组件即将被卸载(或销毁)之前调用。

在这个方法中,适合做一些清理善后工作。例如清楚timer,取消网络请求,或者清除在 componentDidMount 或 componentDidUpdate 中生成的相关 DOM 节点。

总结

  1. mountre-render 的是有区别的。
  2. mount阶段使用前一部分的四个方法( constructor / componentWillMount / render / componentDidMount),围绕组件首次加载而调用;
  3. 后一部分 re-render 相关的,使用 componentWillReceiveProps / shouldComponentUpdate / componentWillUpdate / render / componentDidUpdate ,围绕组件重新渲染而调用。

我总结了一张流程图和一个表格,以表示这些周期函数之间的关系,以及在何种情况下会调用这些函数。

注意:componentWillUnmount 方法未包含其中。

3577156103-589feccebad06_articlex

mount props 变化 state 变化
constructor componentWillReceiveProps shouldComponentUpdate
componentWillMount shouldComponentUpdate (return true) ⏬ / 结束
render (return true) ⏬ / 结束 componentWillUpdate
componentDidMount componentWillUpdate render
/ render componentDidUpdate
/ componentDidUpdate /

完。

文章为本人原创,原文见本人个博:
浅析「React」生命周期(一)
浅析「React」生命周期(二)

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部