React Component生命周期

在学习vue时候有生命周期的认知，其实react一样也有生命周期。 React的生命周期组件分三个阶段：

• Mounting（加载阶段）
• Updating（更新阶段）
• Unmounting（卸载阶段）

旧生命周期

版本更新我们先看下之前旧的生命周期

以一个例子为例

import React, { Component } from 'react'

class LifeCycleSon extends Component {
    constructor(props){
        super(props)
        this.state={
            word: '我是生命周期内的state'
        }
        console.log('1.constructor构造函数')
	}
    componentWillMount(){
        //组件将要挂在，这个时候我们可以进行api的调用，获取数据，但是不能进行dom操作
        console.log('2.componentWillMount组件将要挂载')
    }
    componentDidMount(){
        //此时组件已经挂载，我们可以进行dom操作，可以对我们的状态进行更新操作了
        console.log('4.componentDidMount组件已经挂载')
    }
    componentWillReceiveProps(nextProps){
        //父组件传递的属性有变化，我们可以在这里做相应的响应操作
        console.log("5.componentWillReceiveProps父组件传递的属性更新了")
    }
    shouldComponentUpdate(nextProps, nextState){
        //组件是否需要更新，需要返回一个布尔值，返回true则更新，返回flase不更新，这是一个优化点
        console.log('6.shouldComponentUpdate组件是否应该更新，需要返回布尔值')
        return true
    }
    componentWillUpdate(nextProps, nextState){
        //组件将要更新
        console.log('7.componentWillUpdate组件将要更新')
    }
    componentDidUpdate(){
        //组件已经更新
        console.log('8.componentDidUpdate组件已经更新')
    }
    componentWillUnmount(){
        //组件销毁
        console.log("9.componentWillUnmount组件已经销毁")
    }
    render() {
        console.log('3.render组件渲染')
        return (
            <div>
                {this.props.title}
            </div>
        )
    }
}

export default class LifeCycle extends Component {
    constructor(props){
        super(props)

        this.state={
            son:'我是生命周期父组件',
            showSon:true
        }
        setTimeout(()=>{
            this.setState({
                son:'父组件更新',
            })
        },2000)
        setTimeout(()=>{
            this.setState({
                showSon:false
            })
        },4000)
    }
    render() {
        return (
            <div>
               {this.state.showSon?<LifeCycleSon title={this.state.son}></LifeCycleSon>:<div>组件已销毁</div>} 
            </div>
        )
    }
}

Mounting（加载阶段：涉及6个钩子函数）

constructor()

加载的时候调用一次，可以初始化state

getDefaultProps()

设置默认的props，也可以用dufaultProps设置组件的默认属性。

getInitialState()

初始化state，可以直接在constructor中定义this.state

componentWillMount()

组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。

componentDidMount()

组件渲染之后调用，只调用一次

上述的代码挂载结果为

Updating（更新阶段：涉及5个钩子函数)
componentWillReceivePorps(nextProps)

组件加载时不调用，组件接受新的props时调用，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render。根据官网的描述：在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）以此可用来减少组件的不必要渲染，优化组件性能。

ps：这边也可以看出，就算componentWillReceiveProps()中执行了this.setState，更新了state，但在render前（如shouldComponentUpdate，componentWillUpdate），this.state依然指向更新前的state，不然nextState及当前组件的this.state的对比就一直是true了。

componentWillUpdata(nextProps, nextState)

组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state，在这边可执行一些组件更新发生前的工作，一般较少用。

render()

render方法在上文讲过，这边只是重新调用。

componentDidUpdate(prevProps, prevState)

组件加载时不调用，组件更新完成后调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

上述的代码更新结果为

造成组件更新的情况

1. 父组件重新render

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


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

b.在componentWillReceiveProps方法中，将props转换成自己的state


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

2. 组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化。

class Child extends Component {
   constructor(props) {
        super(props);
        this.state = {
          someThings:1
        }
   }
   shouldComponentUpdate(nextStates){ // 应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
        if(nextStates.someThings === this.state.someThings){
          return false
        }
    }

   handleClick = () => { // 虽然调用了setState ，但state并无变化
        const preSomeThings = this.state.someThings
         this.setState({
            someThings: preSomeThings
         })
   }

    render() {
        return <div onClick = {this.handleClick}>{this.state.someThings}</div>
    }
}

Unmounting（卸载阶段：涉及1个钩子函数）
componentWillUnmount()

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

上述的代码销毁结果为

新生命周期v16.4

官网链接：
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

import React, { Component } from 'react'

class LifeCycleSon extends Component {
    constructor(props){
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
        this.state={
            word: '我是生命周期内的state'
        }
        console.log('1.constructor构造函数')
    }
    static getDerivedStateFromProps(nextProps, prevState){
        console.log('2.getDerivedStateFromProps-----',nextProps,prevState)
        return nextProps
    }
    componentDidCatch(error, info) { // 获取到javascript错误
        console.log('componentDidCatch',error, info)
    }
    componentDidMount(){
        //此时组件已经挂载，我们可以进行dom操作，可以对我们的状态进行更新操作了
        console.log('4.componentDidMount组件已经挂载')
    }
    shouldComponentUpdate(nextProps, nextState){
        //组件是否需要更新，需要返回一个布尔值，返回true则更新，返回flase不更新，这是一个优化点
        console.log('6.shouldComponentUpdate组件是否应该更新，需要返回布尔值',nextProps, nextState)
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { 
        // 组件更新前触发
        console.log('7.getSnapshotBeforeUpdate',prevProps, prevState)
        return null
    }
    componentDidUpdate(prevProps, prevState, snapshot){
        //组件已经更新
        console.log('8.componentDidUpdate组件已经更新',prevProps, prevState, snapshot)
    }
    componentWillUnmount(){
        //组件销毁
        console.log("9.componentWillUnmount组件已经销毁")
    }
    render() {
        console.log('3.render组件渲染')
        return (
            <div>
                {this.props.title}
            </div>
        )
    }
}

export default class LifeCycle extends Component {
    constructor(props){
        super(props)

        this.state={
            son:'我是生命周期父组件',
            showSon:true
        }
        setTimeout(()=>{
            this.setState({
                son:'父组件更新',
            })
        },2000)
        setTimeout(()=>{
            this.setState({
                showSon:false
            })
        },4000)
    }
    render() {
        return (
            <div>
               {this.state.showSon?<LifeCycleSon title={this.state.son}></LifeCycleSon>:<div>组件已销毁</div>} 
            </div>
        )
    }
}

Mounting（加载阶段：涉及6个钩子函数）
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()

加载的时候调用一次，可以初始化state

static getDerivedStateFromProps(nextProps, prevState)

用一个静态函数getDerivedStateFromProps来取代被deprecate的几个生命周期函数，就是强制开发者在render之前只做无副作用的操作，而且能做的操作局限在根据props和state决定新的state，而已。组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法。

注意：

• getDerivedStateFromProps前面要加上static保留字，声明为静态方法，不然会被react忽略掉
• getDerivedStateFromProps里面的this为undefined。static静态方法只能Class(构造函数)来调用(App.staticMethod✅)，而实例是不能的( (new App()).staticMethod ❌ )；当调用React Class组件时，改组件会实例化；所以React Class组件中，静态方法getDerivedStateFromProps无权访问Class实例的this，即this为undefined。可以看react issue相关讨论 https://github.com/facebook/react/issues/12612 https://github.com/facebook/react/issues/14730

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行，和上面无差

componentDidMount()

组件渲染之后调用，只调用一次

结果为：

Updating（更新阶段：涉及5个钩子函数)
static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return
false能阻止更新（不调用render）

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

getSnapshotBeforeUpdate(prevProps, prevState)

触发时间update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate,
可以覆盖componentWillUpdate的所有用法

例如官方示例

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

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我们是否在 list 中添加新的 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 (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

componentDidUpdate()

组件加载时不调用，组件更新完成后调用

结果：

Unmounting（卸载阶段：涉及1个钩子函数）

componentWillUnmount()

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

上述的代码销毁结果为

componentDidCatch(error，info)

组件渲染之后调用，只调用一次

参考链接
https://zhuanlan.zhihu.com/p/38030418
https://www.jianshu.com/p/50fe3fb9f7c3