结论是
-
react中,state,props,context三兄弟改变时,都会引起render重绘,但是重绘并不会导致构造器 constructor重新执行。
-
父组件套子组件时,当父组件的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会执行