react优化：PureComponent

dbn2001

已于 2022-04-08 10:17:09 修改

阅读量1k

点赞数

文章标签： reactjs javascript

于 2022-04-08 10:03:31 首次发布

本文链接：https://blog.youkuaiyun.com/dbn2001/article/details/124033998

版权

本文探讨了React应用中使用PureComponent的原因，主要在于避免不必要的组件渲染，提高效率。当setState()被调用时，即使状态未实际改变，组件也会重新渲染。PureComponent通过默认的浅比较优化shouldComponentUpdate()，只在state或props改变时才触发更新。然而，PureComponent仅做表面比较，深层数据变化可能不会触发更新，并且不应直接修改state。总结了解决组件过度渲染的方法，包括自定义shouldComponentUpdate()和使用PureComponent，及其适用场景和潜在限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么使用PureComponent？

1.只要执行setState({}),即使不改变状态，也会重新渲染组件。

2.只要当前组件重新render，子组件也会随之render，即使子组件没有用到父组件的任何数据。

导致结果：效率低

原因：

component中的钩子函数shouldComponentUpDate()总是返回true

解决办法：

只有当组件的state或props数据发生改变才会重新渲染

1.方法1

重写shouldComponentUpdate()方法，比较新旧state或props数据，如果发生变化则返回true，反之则返回false。

shouldComponent(nextProps,nextState){
    if(this.state.属性名 === nextState.属性名) return false
    return true
}

缺点:不能直接比较state(this.state === nextState)，如果直接比较里面属性值发生变化也会返回true。且当state中属性较多时，比较起来费劲。

2.方法2

使用PureComponent，因为PureComponent重写了shouldComponentUpdate()，只有当state或者props数据变化才返回true

import React,{PureComponent} from 'react'

class A extends PureComponent{
    render(){
        return (
            <div></div>
        )
    }
}

缺点:只是进行state和props的浅比较,如果只是数据对象内部数据变了，返回false。且不要直接修改state数据，要产生新的数据。