React V16.3之前的生命周期

1.static propTypes,static propTypes
2.constructor
3.componentWillMount
4.render
5.componentDidMount
1. shouldComponentUpdate
- 返回 true
  - 1.componentWillUpdate
  - 2.render
  - 3.componentWillReceiveProps 孩子组件 接受到的props发生变化
  - 4.componentWillUpdate
- 返回 false
7.componentWillMount

生命周期测试

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Lifecycle extends Component {
    static propTypes = {
        prop: "prop"
    }

    static propTypes = {
        prop: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props)

        this.state = {
            count: 0
        }

        console.log('constructor-1', props);
    }

    componentWillMount() {
        console.log('componentWillMount-2', '弃用');
    }

    componentDidMount() {
        console.log('componentDidMount-4');
    }

    shouldComponentUpdate(nextProps, nextState) {
        const { count } = nextState;
        console.log('shouldComponentUpdate-5', count);
        return count !== 3
    }

    componentWillUpdate() {
        console.log('componentWillUpdate-6', '弃用');
    }

    componentDidUpdate() {
        console.log('componentWillUpdate-7',);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount-8');
    }


    render() {
        const { count } = this.state
        console.log('render-3', count);

        return (
            <div>
                <h3>Lifecycle页面</h3>
                <p>{count}</p>
                <button onClick={() => this.setState({
                    count: count + 1
                })}>按钮</button>

                <Child count={count} />
            </div>
        )
    }
}

class Child extends Component {
    componentWillReceiveProps(nentProps) {
        console.log('componentWillReceiveProps', "弃用");
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
    }

    render() {
        return (
            <div>
                <h3>Child</h3>
                <div>child count:{this.props.count}</div>
            </div>
        )
    }
}

React 新的生命周期

1.static propTypes,static propTypes
2.constructor
3.render
4.componentDidMount
1. shouldComponentUpdate
- 返回为true
  - 1.render
  - 2.shouldComponentUpdate （子组件传入的Props发生变化）
  - 3.getSnapshotBeforeUpdate
  - 4.componentWillUpdate
- 返回为false
6.componentWillUnmount

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Lifecycle extends Component {
    static propTypes = {
        prop: "prop"
    }

    static propTypes = {
        prop: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props)

        this.state = {
            count: 0
        }

        console.log('constructor-1', props);
    }



    componentDidMount() {
        console.log('componentDidMount-3');
    }

    shouldComponentUpdate(nextProps, nextState) {
        const { count } = nextState;
        console.log('shouldComponentUpdate-4', count);
        return count !== 3
    }

    getSnapshotBeforeUpdate(prevProps, preState) {
        const { count } = preState;
        console.log('getSnapshotBeforeUpdate-5', count);
        return null;
    }

    componentDidUpdate(prevProps, preState, snapshot) {
        console.log('componentWillUpdate-6',);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount-7');
    }


    render() {
        const { count } = this.state
        console.log('render-2', count);

        return (
            <div>
                <h3>Lifecycle页面</h3>
                <p>{count}</p>
                <button onClick={() => this.setState({
                    count: count + 1
                })}>按钮</button>

                <Child count={count} />
            </div>
        )
    }
}

class Child extends Component {

    shouldComponentUpdate(nextProps, nextState) {
        const { count } = nextProps;
        console.log('shouldComponentUpdate', count);
        return count !== 3
    }


    componentWillUnmount() {
        console.log('componentWillUnmount');
    }

    render() {
        return (
            <div>
                <h3>Child</h3>
                <div>child count:{this.props.count}</div>
            </div>
        )
    }
}