文章目录
前言
在开发过程中,肯定会出现层层嵌套的关系组件,当我们使用Component时,父组件中的state或者props发生更新时,无论子组件中的state和props是否更新,都会触发子组件的更新,会导致很多没有必要的render,浪费很多性能。今天这这篇文章就教大家如何来解决这个问题
问题重现
先来看如下代码案例：
应该比较好理解，页面中引入了三个组件，然后点击按钮会触发state的改变
import React, {
Component } from 'react'
export class Root extends Component {
state = {
num: 0
}
add = () => {
this.setState({
num: this.state.num + 1})
}
render() {
return (
<div>Root Page
<Header />
<Main />
<Footer />
<p>{
this.state.num}</p>
<button onClick={
this.add}>add</button>
</div>
)
}
}
class Main extends Component {
render() {
console.log('Main组件渲染了')
return <div>Main</div>
}
}
class Header extends Component {
render() {
console.log('Header组件渲染了')
return <div>Header</div>
}
}
class Footer extends Component {
render() {
console.log('Footer组件渲染了')
return <div>Footer</div>
}
}
export default Root
运行看一下结果：
看起来没有问题，第一次刷新页面，组件渲染，但是我们点击按钮再来看一看：
可以看到，当state发生改变后，我们的组件又都重新渲染了一遍，每一次更新数据都要重新渲染，这样就会出现很多不必要的render，浪费性能，下面来看看如何去解决
问题解决
方案1.使用shouldComponentUpdate生命周期判断
对于上述问题，我们可以根据最新的props和最新的state去判断是否需要调用render方法，所以我们只需要控制子组件进行判断，不让它进行渲染
所以这个判断可以在shouldComponentUpdate生命周期中进行，该生命周期有两个参数nextProps,和nextState，所以我们可以改写成如下：
class Main extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.num !== nextProps.num) {
return true
}
return false
}
render() {
console.log('Main组件渲染了')
return <div>Main</div>
}
}
class Header extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.num !== nextProps.num) {
return true
}
return false
}
render() {
console.log('Header组件渲染了')
return <div>Header</div>
}
}
这样的话进行判断的组件在点击按钮的时候就不会进行更新，但是这个方法不是很推荐，因为我们需要手动去给每个子组件的这个生命周期添加条件判断，所以下面我们来看一下另一个方法
方案2.使用PureComponent
引入PureComponent和使用PureComponent,只需要吧所有的Component改为PureComponent即可
import React, {
PureComponent } from 'react'
export class Root extends PureComponent {
state = {
num: 0
}
add = () => {
this.setState({
num: this.state.num + 1})
}
render() {
return (
<div>Root Page
<Header />
<Main />
<Footer />
<p>{
this.state.num}</p>
<button onClick={
this.add}>add</button>
</div>
)
}
}
class Main extends PureComponent {
render() {
console.log('Main组件渲染了')
return <div>Main</div>
}
}
class Header extends PureComponent {
render() {
console.log('Header组件渲染了')
return <div>Header</div>
}
}
class Footer extends PureComponent {
render() {
console.log('Footer组件渲染了')
return <div>Footer</div>
}
}
export default Root
我们再来看结果，发现点击按钮，子组件并不会重复刷新
所以一般我们会用PureComponent代替Component。简单来说PureComponent实现了shouldComponentUpdate，PureComponent通过props和state进行浅比较,浅比较是react源码中的一个内置函数，它替代了shouldComponentUpdate，它只比较外层数据结构,只要外层相同,则认为没有变化,不会深层次去比较数据。PureComponent真正起作用的时候,只是在一些纯展示的组件上
PureComponent原理
当组件更新的时候,如果组件的props和state都没有发生改变的时候,render方法就不会触发，省去了virtualDOM的生成和对比的过程,所以它能达到提升新能的目的。
PureComponent存在的一些问题
1、不可以在函数式组件上使用
2、进行浅比较，深层次的数据不一致，有可能会导致页面得不到更新。
3、不太适合使用在含有多层嵌套对象的state和props中。