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

react、antDesigin、dva、mobx 专栏收录该内容
68 篇文章 2 订阅

触发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 生命周期函数
  • 2
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值