React 生命周期

React 生命周期

这篇文章，我们来聊一聊在React中的生命周期。首先我们明确一点，在React中，函数式组件是没有生命周期的。谈到生命周期，都是关于类组件的！

生命周期官方网址

React.Component – React (docschina.org)

生命周期常用的有以下

constructor()

render()

componentDidMount()

componentWillUnmount()

挂载阶段

​ 生命周期执行的顺序为

constructor() ==> static getDerivedStateFromProps ==> render() ==>componentDidMount()

constructor()

在组件挂载之前，需要调用构造函数

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

非常地不常用，为什么不常用呢？

​ 原因很简单，如果你想要修改state中的值，可以使用props！

render()

渲染数据

componentDidMount()

在组件挂载完成之后立即执行，通常用来请求网络数据。类似于Vue中的Mounted(()=>{})

挂载阶段一个综合示例：

 class Demo extends React.Component {
            constructor() {
                super()
                console.log("我是第一次");
            }
            static getDerivedStateFromProps(props, state) {
                console.log("我是第二次", props, state);
                return null;//这里必须要传一个默认值
                //如果传一个对象的话，则要修改state中的数据
            }
            state = {
                msg: "东星耀阳"
            }
            handleClick = () => {
                this.setState({
                    msg: "吕德华"
                })
            }
            render() {
                console.log("我是第三次");
                const { msg } = this.state
                return (
                    <div>{msg}
                        <button onClick={this.handleClick}>CLICK ME</button>

                    </div>
                )
            }
            componentDidMount() {
                console.log("我是第四次执行");
            }
        }




        ReactDOM.render(<Demo name="syk" />, document.querySelector('.box1'))

渲染更新阶段

这个阶段的生命周期函数主要经过

static getDerivedStateFromProps() ==> shouldComponentUpdate() ==>render() ==>

getSnapshotBeforeUpdate() ===>componentDidUpdate()

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

首次渲染，不会调用此方法

需要设置返回值。如果返回true，则允许更新视图，如果返回为fasle，则不允许更新视图

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps,prevstate)

在发生更改之前，获取一下上次的dom信息、

此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

第三个参数就是getSnapshotBeforeUpdate()的返回值

卸载阶段

componentWillUnmount

执行一下 清除定时器之类的操作！！！！

最后附上一张官网图