react生命周期钩子函数

生命周期钩子函数

• constructor
• static getDerivedStateFromProps
• render
• componentWillMount
• componentDidMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

最常用的几个生命周期钩子函数

* componentDidMount             类似于 VUE mounted DOM加载完成
* shouldComponentUpdate         该函数会在 props更新 或者 state更新 的时候触发
* componentDidUpdate            类似于 VUE的 update
* componentWillUnmount          类似于 VUE的 beforeDestroy

import React from 'react';
import reactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    static getDerivedStateFromProps(props, state) {
        // 两个固定参数 props就是从父组件接收过来的数据 state就是当前组件的私有数据
        // 会把返回值 合并到 state 中
        // 该钩子函数主要目的就是为了 把 props转成 state
        // 不常用
        return {
            ...props
        }
    }

    render() {
        return <div className=''>

        </div>;
    }

    // componentWillMount() {
    //     // 将要被废弃   不能跟   static getDerivedStateFromProps 共存
    // }

    componentDidMount() {
        // 类似于 VUE mounted DOM加载完成
        // 一般用来做一些  DOM操作  或者  ajax请求
    }

    componentWillReceiveProps(newProps) {
        // 后期将要被废弃
        // 初始化的时候 不会执行该函数
        // 只有当父组件传进来的props更新的时候才会触发这个钩子
    }

    shouldComponentUpdate(nextProps, nextState) {
        let bol = false
        Object.keys(nextProps).forEach(item => {
            nextProps[item] !== this.props[item] ? bol = true : null
        })
        Object.keys(nextState).forEach(item => {
            nextState[item] !== this.state[item] ? bol = true : null
        })
        // 该函数会在 props更新 或者 state更新 的时候触发
        // 父组件更新的时候 子组件的 该函数 也会执行
        // 若该函数的返回值是false 那么这次更新时 就不会执行 当前组件 的render函数
        // 若该函数的返回值是true  那么这次更新时 就会执行   当前组件 的render函数
        // 可以用来提高组件的性能
        return true
    }

    componentWillUpdate() {
        // 组件更新之前 类似于 VUE的 beforeUpdate
    }

    componentDidUpdate() {
        // 类似于 VUE的 update
    }

    componentWillUnmount() {
        // 类似于 VUE的 beforeDestroy
    }

    /**
     * 最常用的几个生命周期钩子函数
     * componentDidMount          类似于 VUE mounted DOM加载完成
     * shouldComponentUpdate      该函数会在 props更新 或者 state更新 的时候触发
     * componentDidUpdate         类似于 VUE的 update
     * componentWillUnmount       类似于 VUE的 beforeDestroy
     */
}

class App2 extends React.PureComponent {
    // 相当于默认进行了 shouldComponentUpdate 的判断
}

reactDOM.render(<><App /></>, document.querySelector("#root"))