react 组件的生命周期

生命周期列表

render 渲染组件 第一次进入时会触发

constructor 构建函数 第一次进入时会触发

componentDidMount 第一次挂载时执行 第一次进入时会触发

componentDidUpdate 更新后调用

componentWillUnmount 销毁前调用

不常用的生命周期钩子

showComponentUpdate 组件即将更新时才会调用 返回一个false或者是true，决定数据更新后是否重新渲染视图。首次渲染和调用

static getDerivedStateFromProps()第一次进入时和当state 和props发生改变时触发

getSnapshotBeforeUpdate() 当shate或者props发生更新时，或者调用forceUpdate时发生

详细信息

render

　　这个钩子函数虽然是组件的渲染方法，但并不是真正意义上的把元素渲染成dom的方法，在它之后还有一个把元素渲染成dom的步骤，这一步只是return一个元素对象，这个并不是组件的执行渲染功能的函数，

　　它的返回值是一个这样的react 元素对象，react就是最终通过它去生成dom对象。它是唯一一个react.Componet 类中必须实现的方法

componentDidMount 

　　组件渲染完成并且挂载在dom上之后调用，这个类似与vue的mounted，者意味着这一步组件中的元素都已经转话成真实的dom，我们可以在这里进行dom操作

showComponentUpdate

　　这个生命周期钩子在getDerivedStateFromProps之后，在render之前调用，通过return false或者true 来决定是否更新组件

 shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log(nextProps);//等效于 props
        console.log(nextState);//等效于 state
        console.log(nextContext);
        nextState.idx = 8888; //在这里更改nextProps 或者 nextState则渲染结果以此为准，但它们仍要听从return的值
        return true //return true则更新组件false则不更新组件
    }

componentDidUpdate

　　在组件更新之后调用，这表明组件此刻是处在最新的状态。你不应该在这里使用改变props或者时state的操作，这样可能会造成无限更新的情况

static getDerivedStateFromProps()

　　在第一次进入，和发生更新的时候（setState，props更新或者调用forceUpdate）都会触发这个生命周期钩子，并且是在render方法之前调用。同时通过return值，我们可以改变最后的渲染结果。（官方文档虽然说通过return null时不发生任何更新，但实际使用中并非如此。

static getDerivedStateFromProps(props, state) {
        console.log(props, state);
        state.idx = 180; //只要在此方法内改变props 或者state中的值，那么最终的渲染结果，就以此为准。即便return 为null
        return null;
    }

一些api

setState 

　　setState是发起一个更新组件的请求，而非立即更新，它不会立即改变state和立即更新组件。为了提高更新效率，react不会对每一次的改变立即更新，而是形成一个更新队列，批量更新。这样就避免了很多无用的更新

componentDidMount() {
        for (let i = 0; i < 100; i++) {
            this.setState({idx: i++});
        } //最终只会触发一次componentDidUpdate
　　　　　console.log(this.state.idx) //打印结果为state在constructor 定义初始值 1

    }

　　如果你想立即获取更新后的值 debug

forceUpdate 强制组件重新更新

过时的生命周期方法 这些声明周期虽然仍然有效，但是不推荐使用

UNSAFE_componentWillMount()

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillUpdate()

react 组件的生命周期

原文：https://www.cnblogs.com/wrhbk/p/12930616.html