react Component与PureComponent区别

最新推荐文章于 2025-02-12 15:50:49 发布

原创最新推荐文章于 2025-02-12 15:50:49 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #reactjs

react 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了React.Component与React.PureComponent的区别，主要在于PureComponent通过浅比较自动优化渲染，避免不必要的更新。当state或props中的对象内容不变时，PureComponent不会重新渲染。示例代码展示了如何在Component中手动实现shouldComponentUpdate来达到类似效果，以及PureComponent如何处理对象的浅比较。

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

React.PureComponent 与 React.Component 几乎相同

区别：

Component 中只要使用了setState，是否有更改，都会重新渲染组件（包括子组件），如需判断是否要重新渲染组件，需要借助shouldComponentUpdate
PureComponent 在原来Component 基础上自动添加了一个shouldComponentUpdate ，处理规则：对对象进行浅对比(指向地址变量，内容不变)

规则如下：

function isReset(obj1, obj2) {
    if (
        Object.keys(obj1).length !== Object.keys(obj2).length
    ) { return false }
    for (let key in obj1) {
        if (obj1[key] !== obj2[key]) {
            return false
        }
    }
    return true
}

Component 方式：

import React from 'react'
//浅比较：只比较地址
function isReset(obj1, obj2) {
    if (
        Object.keys(obj1).length !== Object.keys(obj2).length
    ) { return false }
    for (let key in obj1) {
        if (obj1[key] !== obj2[key]) {
            return false
        }
    }
    return true
}
export default class ComponentPure extends React.Component {
    state = {
        num: 0,
        arr: [0, 1, 2]
    };
    handle = () => {

        this.state.arr.push(3)
        this.setState({
            // arr: [...this.state.arr] //更改了地址，对应会重新渲染 console.log('是否更新'),并且组组件Small也会被渲染
            arr: this.state.arr //地址没有更改，所以对应不会重新渲染
        })
    }
    render() {
        console.log('是否更新')
        let { num } = this.state
        return (
            <button onClick={this.handle} ><Small num={num} />按钮</button>
        )
    }
    shouldComponentUpdate(nextProps, nextState) {
        return !isReset(this.state, nextState) || !isReset(this.props, nextProps)
    }
}
class Small extends React.Component {
    render() {
        console.log('子组件是否更新')
        return (
            <div ></div >
        )
    }
}

PureComponent 方式

import React from 'react'
export default class ComponentPure2 extends React.PureComponent {
    state = {
        num: 0,
        arr: [0, 1, 2]
    };
    handle = () => {
        this.state.arr.push(3)
        this.setState({
            // arr: [...this.state.arr] //更改了地址，对应会重新渲染 console.log('是否更新2'),但Small组件没有改变所以不会重新渲染
            arr: this.state.arr,//地址没有更改，所以不会重新渲染render，
        })
    }
    render() {
        console.log('是否更新2')
        let { num } = this.state
        return (
            <button onClick={this.handle} ><Small num={num} />按钮</button>
        )
    }
}
class Small extends React.PureComponent {
    render() {
        const { num } = this.props
        return (
            <div >{num}</div >
        )
    }
}