React PureComponent 和 Component
2019-05-28 本文已影响21人
zidea
(可发布)
天我们来看一看 Component 和 PureComponent 的区别,我们先从问题出发,通过解决实际的问题来查询出 PureComponent 和 Component 之间区别。这里创建 Greeting 的组件,其中我们用 setInterval 每间隔 2 秒就更新状态title
一次,然后在 6 秒后调用 clearInterval 方法来取消这个打点器。
import React, { Component,Fragment } from 'react'
import TutSubtitle from './TutSubtitle'
import TutTitle from './TutTitle'
export default class Greeting extends Component {
constructor(props){
super(props);
this.state = {
title:Math.random(),
subTitle:Math.random()
}
}
componentDidMount(){
const id = setInterval(() => this.setState({title: Math.random()}),2000);
setTimeout(()=> clearInterval(id),6000);
}
render() {
return (
<Fragment>
<TutTitle name={this.state.title}/>
<TutSubtitle name={this.state.subTitle}/>
</Fragment>
)
}
}
下面创建了个组件被别是 TutTitle 和 TutSubTitle
import React, { Component } from 'react'
export default class TutTitle extends Component {
render() {
console.log('rendering tut title ...');
return (
<div>
<span>{this.props.name}</span>
</div>
)
}
}
import React, { Component } from 'react'
export default class TutSubtitle extends Component {
render() {
console.log('rendering sub tittle...')
return (
<div>
<span>{this.props.name}</span>
</div>
)
}
}
其实我们每次只是更新状态 state 的 title 值,但是更新时同时也渲染 SubTitle
rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
TutTitle.js:5 rendering tut title ...
TutSubtitle.js:5 rendering sub tittle...
我们可以通过 shouldComponentUpdate 来阻止组件跟随其父级组件 state 的变化而更新。如果在 shouldComponentUpdate 返回 true 时,只要父级组件 state 更新其就随之更新。
shouldComponentUpdate(nextProps, nextState, nextContext) {
return false;
}
也可以更精确地进行控制通过对比 nextProps.name !== this.props.name;
来实现。
shouldComponentUpdate(nextProps, nextState, nextContext) {
return nextProps.name !== this.props.name;
}
完整代码如下
export default class TutSubtitle extends Component {
shouldComponentUpdate(nextProps, nextState, nextContext) {
return nextProps.name !== this.props.name;
}
render() {
console.log('rendering sub tittle...')
return (
<div>
<span>{this.props.name}</span>
</div>
)
}
}
当然可以使用 PureComponent 类型来创建 Subtitle 组件,因为 PureComponent 的特殊性我们就无需做额外工作也能够达到预期的效果。
在 PureComponent 在使用 shouldComponentUpdate
的处理是由 PureComponent 自身来处理,而不是由用户来控制,所以我们在 PureComponent 中如果复写此生命周期回调函数,React 会提示我们错误的。告诉我们不允许重写该方法。
shouldComponentUpdate(nextProps, nextState, nextContext) {
return nextProps.name !== this.props.name;
}
以上就是通过实际开发场景来分享 PureComponent 与 Component 的不同之处。