React-Life-Cycle

React-Life-Cycle

Posted by limantang on November 28, 2019

React-Life-Cycle

constructor()构造方法

constructor是ES6类中的默认方法, 通过new关键字实例化出对象时会被自动调用, 该方法必须存在于类中, 如果类中没有实现, 默认会添加空的constructor 当类中存在constructor存在时并且该类作为子类, 就必须调用super方法 如果要在constructor方法中使用this就必须在使用之前调用super

如果要在constructor中访问this.props就必须在super中传入props 无论是否在super中传入props在其他的生命周期中this.props都是可以使用的, 这是React实现的

constructor一般作为初始化state的生命周期 在这里可以异步触发setState来触发更新

componentWillMount组件挂载之前

在组件挂在之前调用, 全局只调用一次, 在这里可以setState, 不会触发重复渲染, 因为这个钩子是在render之前

render 渲染组件

必须定义的生命周期, 用来渲染dom, 不能在这里setState, 必须返回reactDOM

componentDidMount组件挂载完成之后

在组件挂载完成之后调用, 全局只调用一次, 这里可以setState, 可以获取真实dom, 不会触发重复渲染

componentWillReceiveProps(nextProps) props变化之前

props发生变化之后或者父组件重新渲染都会触发这个生命周期函数 在这个函数中可以通过nextProps获取到变化之后props, 通过this.props获取到之前的props, 在这可以进行setState

shouldComponentUpdate(nextProps, nextState)是否重新渲染

组件挂载之后, 在每一次调用setState都会调用这个钩子函数用来判断是否需要重新渲染 forceUpdate不会触发这个钩子函数 如果没写这个钩子函数默认是返回true 返回false则不触发渲染

如果写了这个钩子函数, 就必须显示的指定返回true或者false否则报错可以使用这个钩子进行一些性能优化

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用了forceUpdate之后都会触发这个钩子函数

不能在这里setState, 因为能走到这个钩子函数说明了shouldComponentUpdate返回了true, 这时下一个state状态已经确定, 马上就要执行render函数了, 否则可能会导致整个证明周期混乱

componentDidUpdate(prevProps, prevState, snapshot) 组件完成渲染

除了首次的render之外, 其他的render调用之后都会触发这个钩子函数的调用, 在这setState可能会触发重复渲染, 要自行判断

prevProps上一次的props

prevState上一次的state

snapshotgetSnapshotBeforeUpdate返回的值

componentWillUnmount 组件即将被卸载

组件被卸载之前调用, 在这里删除一些注册的函数, 以及设置的计时器

生命周期图

代码示例

import React from "react";

class LifeCycle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { string: "自身状态" };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps');
    console.log('nextProps',nextProps)
    console.log('prevState',prevState)
  }

  componentWillMount() {
    console.log("componentWillMount");
  }

  render() {
    console.log("render");
    return (
      <div>
        <span><h2>{this.props.obj.number}</h2></span>
        <br />
        <span><h2>{this.state.string}</h2></span>
        <button onClick={() => {
          this.setState({
            string: '改变了自身状态'
          })
        }}>改变state</button>
      </div>
    );
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps");
    console.log('nextProps', nextProps)
    console.log('thisProps',this.props)
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    console.log('nextProps',nextProps)
    console.log('thisProps',this.props)
    console.log('nextState',nextState)
    console.log('thisState',this.state)
    return true;
  }

  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate");
    console.log('nextProps',nextProps)
    console.log('thisProps',this.props)
    console.log('nextState',nextState)
    console.log('thisState',this.state)
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    console.log('prevProps',prevProps)
    console.log('thisProps',this.props)
    console.log('prevState',prevState)
    console.log('thisState',this.state)
    return 999;
  }
  

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    console.log('prevProps',prevProps)
    console.log('thisProps',this.props)
    console.log('prevState',prevState)
    console.log('thisState',this.state)
    console.log('snapshot',snapshot)
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
  
}

export default LifeCycle;

代码示例

react-theory/life.js at master · echoheart/react-theory · GitHub

React16生命周期函数变化

getDerivedStateFromProps(nextProps, prevState)

这一个静态方法, 所以不能在这个钩子当中使用this

也就是不能调用setState

这个函数的两个参数分别是新的props和当前的state对象

这个钩子会返回一个新的state对象来更新当前的state对象, 如果不需要更新可以返回null

这个钩子函数会在组件首次挂载时, 接收到新的props时, 父组件重新渲染, 调用setState时, 和foreUpdate时被调用

也就是说这个钩子函数在首次渲染阶段, 以及更新阶段都会被调用

这个钩子就是为了替代之前的componentWillMount,componentWillReceiveProps,componentWillUpdate钩子函数的

nextProps当前的props

prevState上一次的props

getSnapshotBeforeUpdate(prevProps, prevState)

这个用来替代componentWillUpdate

这个钩子在更新阶段的render之后, componentDidUpdate之前调用

prevProps上一次的props

prevState上一次的state

react16生命周期图