import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
const root = ReactDOM.createRoot(document.getElementById('root'))
// PureComponent实现浅比较
class MyApp01 extends React.Component {
state = {
list: [1, 2, 3],
}
handleClick = () => {
// ✔ [..this.state.list]表示一个新的数组,内存地址已经发生改变
// ❌ 浅比较:会导致list的内存地址,一致没有变化
this.state.list.push(4)
this.setState(this.state)
}
render() {
const { list } = this.state
return (
<>
<div>
<button onClick={this.handleClick}>点击修改list</button>
<Child list={list} />
</div>
</>
)
}
}
class Child extends React.PureComponent {
shouldComponentUpdate(nextProps) {
console.log('this.props.list => ', this.props.list)
console.log('nextProps.list => ', nextProps.list)
console.log(
'nexProps.list === this.props.list ===> ',
nextProps.list === this.props.list
)
if (nextProps.list === this.props.list) {
return false
} else {
return true // 表示更新
}
}
render() {
const { list } = this.props
return <h1>Child - {list}</h1>
}
}
const divNode = (
<div>
<MyApp01 />
</div>
)
root.render(divNode)
标签:shouldComponentUpdate,const,nextProps,细化,list,React,state,props
From: https://www.cnblogs.com/openmind-ink/p/17243919.html