react 改变子组件props,触发render方法和生命周期函数（二）_触发render方法的三种方式

触发render方法的三种方式

在学习生命周期的，触发生命周期函数调用有三种方式

1. setState 改变状态的值
2. 改变props的值
3. 使用forceUpdate()方法

案例

定义父组件 ParentComp

import React from 'react';
// 如果是当前目录，一定要添加 “./”
import SonComp from './SonComp.js'

class ParentComp extends React.Component {

    constructor (props) {
        console.log('ParentComp constructor');
        super(props);
        this.state = {
            compnentName: 'parent component',
            sonCompName: '二蛋'
        }
    }

    componentWillMount () {
        console.log('ParentComp componentWillMount');
    }

    componentDidMount () {
        console.log('ParentComp componentDidMount');
    }

    /**
     * 判断是否需要更新视图，执行后面的render方法
     * 1. 如果返回 false ，则不需要执行后面的render方法，视图也不会改变
     * 2. 返回true, 需要执行render方法，视图也会对应的改变
     */
    shouldComponentUpdate () {
        console.log('ParentComp shouldComponentUpdate ');
        return true;
    }

    /**
     * 当调用this.setState 改变的时候，会触发该函数，
     * 它是在render函数调用之前
     */
    componentWillUpdate () {
        console.log('ParentComp componentWillUpdate ');
    }

    componentDidUpdate () {
        console.log('ParentComp componentDidUpdate ');
    }

    changeCompName = () => {
        this.setState({
            compnentName: 'newCompName' + new Date().getTime()
        })
    }
    // 改变子组件的名字
    changeSonCompName = () => {
        this.setState({
            sonCompName: '傻蛋' + new Date().getTime()
        })
    }

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

    render() {
        console.log('ParentComp render');
        let { compnentName, sonCompName } = this.state;
        return (
            <div>
                <SonComp myname={sonCompName}></SonComp>
                <div>{compnentName}</div>
                <div>
                    <button onClick={this.changeCompName}>
                        改变组件名字
                    </button>
                </div>
                <div>
                    <button onClick={this.changeSonCompName}>
                        改变子组件名字
                    </button>
                </div>
            </div>
        )
    }

}

export default ParentComp;

初始化生命周期执行顺序

constructor ----> componentWillMount ----> render ---->componentDidMount

调用setState周期函数执行顺序

shouldComponentUpdate ----> componentWillUpdate ----> render ----> componentDidUpdate

定义子组件 ParentComp

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

class SonComp extends React.Component {
    constructor (props) {
        console.log('SonComp constructor')
        super(props);
        this.state = {
            professional: 'WEB'
        };
    }

    componentWillMount () {
        console.log('SonComp componentWillMount');
    }

    componentDidMount () {
        console.log('SonComp componentDidMount');
    }

    componentWillReceiveProps () {
        console.log('SonComp componentWillReceiveProps');
    }
    

    /**
     * 判断是否需要更新视图，执行后面的render方法
     * 1. 如果返回 false ，则不需要执行后面的render方法，视图也不会改变
     * 2. 返回true, 需要执行render方法，视图也会对应的改变
     */
    shouldComponentUpdate () {
        console.log('SonComp shouldComponentUpdate ');
        return true;
    }

    /**
     * 当调用this.setState 改变的时候，会触发该函数，
     * 它是在render函数调用之前
     */
    componentWillUpdate () {
        console.log('SonComp componentWillUpdate ');
    }

    componentDidUpdate () {
        console.log('SonComp componentDidUpdate ');
    }

    changeProfessional = () => {
        this.setState({
            professional: 'nodejs' + new Date().getTime()
        })
    }

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

    destoryComp = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'));
    }

    render() {
        console.log('SonComp render')
        let {myname} = this.props;
        let {professional} = this.state;
        return (
            <div>
                <div>我的名字：{myname}</div>
                <div>我的专业：{professional}</div>
                <div>
                    <button onClick={this.changeProfessional}>
                        学习另外专业
                    </button>
                </div>
                <div>
                    <button onClick={this.destoryComp}>
                        销毁组件
                    </button>
                </div>
            </div>
        )
    }

}

export default SonComp;

父子组件初始化执行的周期函数

1. 父组件 constructor ---- componentWillMount ---- render
2. 子组件 constructor ---- componentWillMount ---- render ---- componentDidMount
3. 父组件 componentDidMount

父组件改变子组件的props执行的周期函数

1. 父组件 shouldComponentUpdate ---- componentWillUpdate ---- render
2. 子组件 componentWillReceiveProps ---- shouldComponentUpdate(返回boolean) ---- componentWillUpdate ---- render ---- componentDidUpdate
3. 父组件 componentDidUpdate
   备注：componentWillReceiveProps 初始化的时候不执行，只有props属性改变的时候才会触发，可以以此来判断是否是props发生了变化

销毁组件

1. 先执行父组件的 componentWillUnmount 生命周期函数
2. 再执行子组件的 componentWillUnmount 生命周期函数