PureComponent是内部定制了shouldComponentUpdate⽣命周期的Component
它重写了⼀个⽅法来替换shouldComponentUpdate⽣命周期⽅法
平常开发过程中设计组件能使⽤PureComponent的地⽅都尽量使⽤
使⽤PureComponent特性要记住两点:
1.确保数据类型是值类型
2.如果是引⽤类型,确保地址不变,同时不应当有深层次数据变化
React.memo是⼀个⾼阶组件的写法
React.memo让函数组件也拥有了PureComponent的功能
PureComponent在es6 中的class组件使用,memo在function Component中使用
PureComponentss.js
// import React, { Component,PureComponent } from 'react'
import React, { Component } from 'react'
// class Name extends Component {
// shouldComponentUpdate(nextProps){
// return nextProps.name!==this.props.name
// }
// render() {
// console.log('name组件')
// return (
// <div>
// <p>姓名:{this.props.name}</p>
// </div>
// )
// }
// }
//PureComponent
// class Name extends PureComponent {
// render() {
// console.log('name组件')
// return (
// <div>
// <p>姓名:{this.props.name}</p>
// </div>
// )
// }
// }
//React.meno
const Name=React.memo((props)=>{
console.log('name组件')
return (
<div>
<p>姓名:{props.name}</p>
</div>
)
})
class Age extends Component {
render() {
console.log('age组件')
return (
<div>
<p>年龄:{this.props.age}</p>
</div>
)
}
}
export default class PureComponentss extends Component {
constructor(props){
super(props)
this.state={
name:'大狗',
age:1
}
}
componentDidMount(){
setInterval(() => {
this.setState({
age:this.state.age+1
})
}, 1000);
}
render() {
return (
<div>
<Name name={this.state.name}></Name>
<Age age={this.state.age}></Age>
</div>
)
}
}