console
function Child(props){
const { name, age } = props;
console.log('rerender' + new Date().getTime());
return (
<div>
<p>{name} ‘s age is {age}</p>
</div>
)
};
function Parent(){
const [data, setData] = React.useState({name:'', age: '20'});
return (
<div>
<Child name={data.name} age={data.age} />
<p><button onClick={ () => { setTimeout(()=>{ setData((preData) => ({ name:'ccccc',age : 26 }) ) }, 100) } }>button1</button></p>
<p><button onClick={ () => { setTimeout(()=>{
setData((preData) => ({
...preData,
name:'hello'
}));
setData((preData) => ({ ...preData, age : 25 }))
},10)}}>button2</button></p>
</div>
)
}
ReactDOM.render(<Parent /> , document.getElementById('root'))
<!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='root'></div>
</body>
</html>