React 生命周期 钩子函数

React15

挂载过程

 //  完成了React数据的初始化。 props、state
constructor()
//  组件已经完成初始化数据，但是还未渲染DOM时执行的逻辑
componentWillMount()
//  DOM完成，网络请求
componentDidMount() 

更新过程

// 接收父组件新的props时，重新渲染组件执行的逻辑。
componentWillReceiveProps(nextProps)
// 在setState以后，state发生变化，组件会进入重新渲染的流程时执行的逻辑。
// 在这个生命周期中return false可以阻止组件的更新，主要用于性能优化。
shouldComponentUpdate(nextProps,nextState)
// shouldComponentUpdate返回true以后，组件进入重新渲染的流程时执行的逻辑。
componentWillUpdate (nextProps,nextState)
// 页面渲染执行的逻辑，render函数把jsx编译为函数并生成虚拟dom，
// 然后通过其diff算法比较更新前后的新旧DOM树，并渲染更改后的节点。
render()
// 重新渲染后执行的逻辑。
componentDidUpdate(prevProps,prevState)

卸载过程

// 组件的卸载前执行的逻辑，比如进行“清除组件中所有的setTimeout、setInterval等计时器”或“移除removeEventListener”等操作。
componentWillUnmount()

React16

react16.4后使用了新的生命周期，使用getDerivedStateFromProps代替了旧的componentWillReceiveProps及componentWillMount。使用getSnapshotBeforeUpdate代替了旧的componentWillUpdate。在 Fiber 机制下，render 阶段是允许暂停、终止和重启的。废弃的生命周期钩子函数，它们都处于render阶段，都可能被重复执行。

由于React 16版本中对生命周期有所更改,所以这里介绍新老版本,现在一般不建议使用React15版本的,会报安全性警告

组件的挂载

React将组件渲染 > 构造DOM > 展示到页面的过程称为组件的挂载.

constructor()

constructor()是ES6中类的默认方法,通过new命令生成对象实例时自动调用该方法.其中的super()是class方法中的继承,它是使用extends关键字来实现的.子类必须在constructor()中调用super()方法,否则新建实例会报错.如果没有用到constructor(),React会默认添加一个空的constructor()

constructor()用来做一些组件初始化的工作,比如定义this.state的初始内容,继承父类获取props

class BaseWorld extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'liuqiao'
        };
    }
    render() {
        console.log(this.props);
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

static getDerivedStateFromProps(props,state)

组件在装载的时候,也就是组件在构建之后(虚拟DOM之后,实际DOM挂载之前),每次获取新的props或state之后,当props更改时触发,然后返回的对象将会与当前的状态合并,作为新的state,返回null则说明不需要更新state.

static getDerivedStateFromProps() {
    console.log('getDerivedStateFromProps');
    return null;
}

第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子)都会触发此生命周期. 一般不怎么使用这个钩子函数

render()

非常重要的钩子函数.React最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都会在此进行.

render() {
    console.log('render');
    return (
        <div>
        </div>
    );
}

componentDidMount()

组件渲染之后,只调用一次,非常重要:表示dom准备就绪,动态数据请求已经初始化完成

componentDidMount() {
    console.log('----componentDidMount');
    // 开启长连接
    // 开定时器
    // 调接口
}

组件的数据更新阶段

static getDerivedStateFromProps(props,state)

只要props或state有更新,就会触发这个钩子函数,不常用

shouldComponentUpdate(nextProps, nextState)

用于判断组件是否需要更新.也就是相当于diff运算的开关,一般我们会在此钩子函数中进行相关的性能优化,比如我们设置在此对比前后两个props和states是否相同,如果相同则返回false阻止更新.因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

组件接受新的state或者props时调用.默认情况下,该方法返回true,当返回值为false时,则不再向下执行其他生命周期方法.

componentWillUpdata(nextProps, nextState)

组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state

最后一次更改props和state的机会,组件将要更新的时候触发

render()

重新再渲染一遍组件,更新dom树

getSnapshotBeforeUpdate()

在最近的更改被提交到DOM元素前，render()之后,使得组件可以在更改之前获得当前值，此生命周期返回的任意值都会传给componentDidUpdate()的第三个参数。’,不常用’

componentDidUpdate()

dom更新完成时,更新DOM节点的操作可放在这里进行。

数据更新可以分为2中情况:

组件自身state更新

shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()

传递过来的props更新

static getDerivedStateFromProps()>shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()

组件的卸载

componentWillUnmount()

在组件卸载之前调用,可以在此方法中执行任何需要清理的工作,比如定时器,事件回收,取消网络请求等等,或者清理在componentDidMount()中创建的任何监听事件等

componentDidMount() {
    console.log('componentDidMount');
    // 开启长连接
    // 开定时器
    // 调接口
    this.timer=setTimeout(()=>{
        console.log('开启定时器');
        
    },1000);
}

//组件卸载阶段
componentWillUnmount(){
    this.timer&&clearTimeout(this.timer);
}

异常处理

componentDidCatch()

在渲染期间,生命周期方法或构造函数constructor()中发生错误时,将会调用componentDidCatch()方法

componentDidCatch(error,info){
    
}

不会处理捕获到下面引发的错误

• componentDidCatch()本身错误
• 服务端渲染(SSR)
• 事件处理,因为事件处理不发生在React渲染时,报错不影响渲染
• 异步代码

总结(新老版本区别)

React16新的生命周期弃用了componentWillMount,componentWillReceiveProps,componentWillUpdate新增了 getDerivedStateFromProps,getSnapshotBeforeUpdate来代替弃用的三个钩子函数componentWillMount,componentWillReceiveProps,componentWillUpdate
React16并没有删除这三个钩子函数,但是不能和新的钩子函getDerivedStateFromProps,getSnapshotBeforeUpdate数混用,React17将会删除componentWillMount,componentWillReceiveProps,omponentWillUpdate
新增了对错误的处理 componentDidCatch