React 组件的生命周期

173 阅读3分钟

组件从被创建到被销毁的过程称为组件的声明周期。通常,组件的生命周期可以分为三个阶段:挂载阶段、更新阶段、卸载阶段。

挂载阶段

这个阶段组件被创建,执行初始化,并挂载到DOM中,完成组件的第一次渲染。依次调用的生命周期方法有:

  • constructor
  • componentWillMount
  • render
  • componentDidMount

constructor

组件被创建时,会首先调用组件的构造方法。这个构造方法接收一个props参数,props是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个props就指向的就是组件的默认属性。在改方法中,首先调用super(props)才能保证props被传入组件中。constructor通常用于初始化组建的state以及绑定事件处理方法等工作。

componentWillMount

这个方法在组件被挂载到DOM前调用,且只会被调用一次。该方法很少使用

render

这是定义组件时唯一必要的方法。在这个方法中,根据组件的props和state返回一个React元素,用于描述组建的UI,通常React元素使用JSX语法定义。需要注意的是,render并不负责组件的实际渲染工作,它只是返回一个UI的描述,真正渲染出页面DOM的工作由React自身负责。render是一个纯函数,在这个方法中不能执行任何有副作用的操作,所以不能再render中调用this.setState,这回改变组件的状态。

componentDidMount

在组件被挂载到DOM后调用,且只会被调用一次。这时候已经可以获取到DOM结构,因此依赖DOM节点的操作可以放到这个方法中。这个方法通常还会用于向服务器端请求数据。在这个方法中调用this.setState会引起组件的重新渲染。

更新阶段

组件被挂载到DOM后,组件的props或state可以引起组件更新。props引起的组件更新,本质上是由渲染该组件的父组件引起的,也就是当父组件的render方法被调用时,组件会发生更新过程,这个时候,组件props的值可能发生改变,也可能没有改变,父组件render方法每一次调用,都会导致组件更新。State引起的组件更新,是通过调用this.setState来触发的。组件的更新阶段,依次调用的生命周期方法有:

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

componentWillReceiveProps(nextProps)

这个方法只在props引起的组件更新过程中才会被调用。State引起的组件更新并不会触发该方法的执行。

shouldComponentUpdate(nextProps,nextState)

这个方法决定组件是否可以继续执行更新过程。当方法返回true时(true也是这个方法的默认返回值),组件会继续更新过程;当方法返回false时,组件的更新过程停止,后续的 componentWillUpdate,render,componentDidUpdate也不会被调用。这个方法用来减少不必要的渲染,从而优化组件的性能。

componentWillUpdate(nextProps,nextState)

这个方法再render调用前执行,可以座位组件更新发生前执行某些工作的地方,一般也很少被用到

componentDidUpdate(prevProps,prevState)

组件更新后被调用,可以作为操作更新后的DOM的地方。

卸载阶段

  • componentWillUnmount 这个方法在卸载前调用,可以再这里执行一些清理工作,比如清楚组件使用的定时器,清除componentDidMount中手动创建的DOM元素等,以避免内存泄漏。

只有类组件才具有生命周期方法,函数组件是没有生命周期方法的,因此永远不要在函数组件中使用生命周期方法