React class的生命周期

类组件的state生命周期图

挂载

挂载（当组件实例被创建并插入DOM中）的时候

生命周期的调用顺序

1. 构造函数 constructor() 初始化状态 static;

getDerivedStateFromProps(nextprops,prevstate) 根据新的属性(props)生成新的状态(state) 参数是新的属性props和老的状态，此生命周期不常用.

2. render() 把虚拟DOM变成真实DOM并插入到DOM元素中;
3. componentDidMount(); DOM挂载完成.

• 组件的渲染顺序,父组件先渲染(父组件render之后) => 子组件开始渲染 => 子组件挂载完成之后(componentDidMount)父组件最后挂载完成(componentDidMount).

import React from 'react'import { render } from 'react-dom'class App extends React.Component {    constructor() {        super()        this.state = { num: 1 }        console.log('1 初始化挂载');
    }    add = () => {        this.setState({ num: this.state.num + 1 })    }    UNSAFE_componentWillMount() { //即将废弃        console.log('2.5 组件即将挂载--即将废弃');    }    componentDidMount() {        console.log('3 挂载完成');    }    render() {        console.log('2 render 渲染');        return (            <div>                <Child num={this.state.num} />                <button onClick={this.add}>点击父组件加一</button>            </div>        );    }}class Child extends React.Component {    constructor() {        super();        this.state = {            n: 1        }        console.log('1.1 子组件 初始化constructor');    }    //根据新的属性生成新的状态    // 返回null 不更新任何状态    static getDerivedStateFromProps(nextprops, prevstate) {        //参数是新的props属性        console.log('1.2 getDerivedStateFromProps');        let { num } = nextprops;        if (num === 2) {            return {                n: prevstate.n + 2            }        }        return null
    }    componentDidMount() {        console.log('1.4 子组件 挂载完成');    }    render() {        console.log('1.3 子组件 渲染');        return <div>            我是子组件            {this.state.n}            <br />            父组件传过来的props是{this.props.num}        </div>
    }}render(<App />, document.getElementById('root'))

更新

组件的 props 或 state 发生变化时会触发更新。

组件更新的生命周期调用顺序如下：

1. static getDerivedStateFromProps()

2. shouldComponentUpdate()

   • 如果 shouldComponentUpdate返回的是false 则不在继续
   • 返回true 会继续第3步

3. render()

4. getSnapshotBeforeUpdate() 获取DOM更新前的快照

5. componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

import React from 'react'import { render } from 'react-dom'class App extends React.Component {    constructor() {        super()        this.state = { num: 1 }        console.log('1 初始化挂载');    }    add = () => {        this.setState({ num: this.state.num + 1 })    }    UNSAFE_componentWillMount() { //即将废弃        console.log('2.5 组件即将挂载--即将废弃');    }    shouldComponentUpdate(nextProps, nextState) {        // 询问组件是否需要更新，如果返回true 就返回更新，返回false不更新        //参数 是新的属性和新的状态        console.log(nextProps);        console.log(nextState);        console.log('更新1.0 询问组件是否需要更新 shouldComponentUpdate');        return true        // return false    }    componentDidMount() {        console.log('3 挂载完成');    }    componentDidUpdate() {        console.log('更新2.0 更新完成');    }
    render() {        console.log('2 render 渲染');        return (            <div>                {/* <Child num={this.state.num} /> */}                {this.state.num}                <button onClick={this.add}>点击父组件加一</button>            </div>        );    }}class Child extends React.Component {    constructor() {        super();        this.state = {            n: 1        }        console.log('1.1 子组件 初始化constructor');    }    //根据新的属性生成新的状态    // 返回null 不更新任何状态    static getDerivedStateFromProps(nextprops, prevstate) {        //参数是新的props属性        console.log('1.2 getDerivedStateFromProps');        let { num } = nextprops;        if (num === 2) {            return {                n: prevstate.n + 2            }        }        return null    }    componentDidMount() {        console.log('1.4 子组件 挂载完成');    }    render() {        console.log('1.3 子组件 渲染');        return <div>            我是子组件            {this.state.n}            <br />            父组件传过来的props是{this.props.num}        </div>
    }}render(<App />, document.getElementById('root'))

• constructor 👉 getDerivedStateFromProps(静态方法)👉 shouldComponentUpdate(询问是否需要更新) 👉 不需要(中断)
• constructor 👉 getDerivedStateFromProps(静态方法)👉 shouldComponentUpdate(询问是否需要更新) 👉 需要 👉 render(渲染) 👉 getSnapshotBeforeUpdate(获取到更新的dom) 👉 componentDidUpdate
• componentDidUpdate() 会在更新后会被立即调用。但首次挂载渲染不会执行此方法。

卸载

当组件从 DOM 中移除时会调用,方法如下：

• componentWillUnmount()componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如，清除 timer，取消网络请求或清除本地存储状态。

import React from 'react'import { render } from 'react-dom'
class App extends React.Component {    constructor() {        super()        this.state = { num: 1 }    }    add = () => {        this.setState({ num: this.state.num - 1 })    }    render() {        return <div >            {this.state.num && <Children />}            {this.state.num}            <button onClick={this.add}>点击</button>        </div>    }}class Children extends React.Component {    componentWillUnmount() {        console.log('组件即将卸载');    }    render() {        return <div >            我是子组件        </div>    }}render(<App />, document.getElementById('root'))

• 在生命周期的render阶段（Render及之前的生命周期） 纯净且不包含副作用。可能会被 React 暂停，中止或重新启动

  • construtor render 初始化状态和接收props参数

• Pre-commit 阶段 可以读取 DOM。

  • getSnapshotBeforeUpdate

• commit 阶段 可以使用 DOM，运行副作用，安排更新。(重点)

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount