react中render重绘时,constructor是否执行问题

结论是
  1. react中,state,props,context三兄弟改变时,都会引起render重绘,但是重绘并不会导致构造器 constructor重新执行。

  2. 父组件套子组件时,当父组件的render重绘,子组件构造器不执行,但是子组件从父组件获值的this.props被更新了

比如

在这里插入图片描述

当Fatherrender重绘时,自己的constructor不会执行,Son组件中的constructor也不会执行

若要让Son组件的构造器执行,只能用函数返回Son组件,比如:

import React from "react"
import {render} from "react-dom"
import Son from "./Son.js"

class Father extends React.Component{
    constructor(){
        super();
        this.state={
            'a':1
        };
        console.log("Father Constructor")
    }
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    showSon(){
        if (this.state.a==2){
            return <Son/>
        } else {
            return ''
        }
    }
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    render() {
        console.log("Father Render");
        return(
            <div>
                {this.showSon()}
                <input type="button" onClick={()=>{this.setState({'a':2})}}/>
            </div>
        )
    }
}

export  default Father

此时Son组件中的constructor会执行

发布了9 篇原创文章 · 获赞 0 · 访问量 294

猜你喜欢

转载自blog.csdn.net/qq_41402809/article/details/104299450
今日推荐