console
class Child extends React.PureComponent {
constructor(props){
super(props);
this.state = {
text:'',
data:{},
staticData:{}
}
}
static getDerivedStateFromProps(props, state){
console.log('1 : ', state.data === props.data);
console.log('2 : ', state.staticData === props.staticData)
return {
data: props.data,
staticData: props.staticData,
}
}
render(){
return (
<div>
测试 { this.state.text }
</div>
)
}
}
const helloData = {
name:111,
age:18
}
console.log('1111111');
class Parent extends React.PureComponent {
constructor(){
super();
this.state = {
text:'',
obj:{
name:111,
age:18
}
};
}
render(){
console.log('rerender');
const { text, obj } = this.state;
const helloData1 = {
name:111,
age:18
}
return (
<div>
<input value={text} onChange={ e => this.setState({text: e.target.value }) } />
<div><button onClick={ () => { this.setState({ obj: { name: 9090, age: 1999 } }) } }>button</button></div>
<div><Child data={obj} staticData={helloData} text={this.state.text } /></div>
</div>
)
}
}
ReactDOM.render(<Parent />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<div id='app'></div>
</body>
</html>