SOURCE

console 命令行工具 X clear

                    
>
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>

本项目引用的自定义外部资源