memo 作用
- 组件仅在它的props 发生变化的时候进行重新渲染
memo 与PureComponent 区别
- PureComponent 只能用于class组件，memo 用于function组件
示例
效果
import React, { Component , memo} from 'react'
export default class App extends Component {
state = {
father: 'kkk',
child: 'hhh'
}
render() {
return (
<div>
<Child value={this.state.child}></Child>
<button onClick={() => {
this.setState({
father: '222'
})
}}>clikc</button>
<button onClick={() => {
this.setState({
child: 'kkk'
})
}} >click2</button>
</div>
)
}
}
const Child = memo((props) => {
console.log('111')
return (
<div>Child-{props.value}</div>
)
})
