一、PureComponent的性能优化
继承自Component的情况：如果不加生命周期shouldComponentUpdate，会反复渲染页面，一直打印render
import React, { Component } from "react";
export default class ComponentPage extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
setCount = () => {
this.setState({
count: 100
})
}
// shouldComponentUpdate的作用：每次赋相同值不会反复渲染页面
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
render() {
console.log("render")
const { count } = this.state;
return (
<div>
<h3>ComponentPage</h3>
<button onClick={this.setCount}>{count}</button>
</div>
)
}
}
继承自PureComponent的情况：定制了shouldComponentUpdate后的Component，不会一直渲染页面
import React, { PureComponent } from "react";
export default class PureComponentPage extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
setCount = () => {
this.setState({
count: 100
})
}
render() {
console.log("render")
const { count } = this.state;
return (
<div>
<h3>PureComponentPage</h3>
<button onClick={this.setCount}>{count}</button>
</div>
)
}
}
二、PureComponent的浅比较
PureComponent缺点是必须要用class组件形式，⽽且要注意是浅比较。
浅比较：只能比较一层，有很多层就不会再比较，如果给对象obj赋值，则还是会反复渲染页面，一直打印render
import React, { PureComponent } from "react";
export default class PureComponentPage extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: 0,
obj: {
num: 0
}
}
}
setCount = () => {
this.setState({
count: 100,
obj: {
num: 1000
}
})
}
render() {
console.log("render")
const { count } = this.state;
return (
<div>
<h3>PureComponentPage</h3>
<button onClick={this.setCount}>{count}</button>
</div>
)
}
}
三、Component和PureComponent的比较
React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate() ，⽽ React.PureComponent 中以浅层对⽐ prop 和 state 的方式来实现了该函数。
如果赋予 React 组件相同的 props 和 state， render() 函数会渲染相同的内容，那么在某些情况下使用 React.PureComponent 可提高性能。
注意
React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产⽣错误的⽐对结果。仅在你的 props 和 state 较为简单时，才使用 React.PureComponent ，或者在深层数据结构发生变化时，调⽤ forceUpdate() 来确保组件被正确地更新。你也可以考虑使⽤ immutable 对象加速嵌套数据的⽐较。
此外，React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此，请确保所有子组件也都是“纯”的组件。
网友评论