React 生命周期

                                           React 生命周期

 

1. React v16.0前的生命周期

React 生命周期_第1张图片

 

第一个是组件初始化(initialzation)阶段

react 的初始化阶段我们一般放继承了React Component 的类中。这样该类也就继承这个react的基类,这时才有render(), 生命周期等方法可以使用(这也是函数组件不能使用这些方法的原因)。

我们可以通过子类的constructor() 中调用super(props)来调用基类的构造方法(constructor()),也将父组件的props注入给子组件,供子组件读取(子组件中对props只读不可变, state可变)。

而constructor() 用来做一些组件初始化工作(如定义 this.state的初始内容)。

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

注: 

(1) getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性.(用的比较少)

(2)  getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问 this.props

 

第二个是组件的挂载(Mounting)阶段

此阶段分为: componentWillMount,  render,  componentDidMount 三个时期。

*componentWillMount: 在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用

*render: 根据组件的props和state, return 一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。 render是纯函数不能在里面执行this.setState,会有改变组件状态的副作用

*componentDidMount: 组件挂载到DOM后调用,且只会被调用一次(该生命周期函数dom已真实渲染到页面,已可以操作页面dom及相关事件绑定等操作)

第三个是组件的更新(Upate)阶段

需要先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新,更新后的state和props相对之前无论是否有变化,都将引起子组件的重新render

造成组件更新有两类(三种)情况:

(1)父组件重新render

        1)  每当父组件重新render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化

class Child extends Component {
   // 应该使用这个方法,否则无论props是否有变化都将会导致组件跟着重新渲染
   shouldComponentUpdate(nextProps, nextState){ 
        if(nextProps.someThings === this.props.someThings){
          return false
        }
    }
    render() {
        return 
{this.props.someThings}
} }

      2) 在componentWillReceiveProps方法中,将props转换成自己的state

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    // 父组件重传props时就会调用这个方法
    componentWillReceiveProps(nextProps) { 
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return 
{this.state.someThings}
} }

  根据官网描述:在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染

   (这里不会第二次: 个人理解是会渲染,但不会同时因为props & state 改变而同时渲染两次)。

此阶段分为: componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render , compoentDidUpdate 

1) componentWillReceiveProps(nextProps)

 此方法只调用于props引起的组件更新过程中,参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的,所以在此方法中根据nextProps和this.props来查明重传的props是否改变,以及如果改变了要执行啥,比如根据新的props调用this.setState出发当前组件的重新render

2) shouldComponentUpdate(nextProps, nextState)

此方法通过比较nextProps,nextState及当前组件的this.props,this.state,返回true时当前组件将继续执行更新过程,返回false则当前组件更新停止,以此可用来减少组件的不必要渲染,优化组件性能。

3) componentWillUpdate(nextProps, nextState)

此方法在调用render方法前执行,在这边可执行一些组件更新发生前的工作,一般较少用。

4) render()  略

5) componentDidUpdate(prevProps, prevState)

此方法在组件更新后被调用,可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state

卸载阶段

componentWillUnmount: 

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

2. React v16.+ 的生命周期

React 生命周期_第2张图片

 

原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启async rendering,在render函数之前的所有函数,都有可能被执行多次.

新引入的两个生命周期函数:

1)getDerivedStateFromProps:

  getDerivedStateFromProps本来(React v16.3中)是只在创建和更新(由父组件引发部分)。在React v16.4中改正了这一点,让getDerivedStateFromProps无论是Mounting还是Updating,也无论是因为什么引起的Updating,全部都会被调用,具体可看上面的React v16.+ 的生命周期图

2)getSnapshotBeforeUpdate:

getSnapshotBeforeUpdate() 被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()

下面是官网的一个例子:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    //我们是否要添加新的 items 到列表?
    // 捕捉滚动位置,以便我们可以稍后调整滚动.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    //如果我们有snapshot值, 我们已经添加了 新的items.
    // 调整滚动以至于这些新的items 不会将旧items推出视图。
    // (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      
{/* ...contents... */}
); } }

 

你可能感兴趣的:(ReactJS)