react中的纯组件pureComponent

最新推荐文章于 2025-05-24 10:06:09 发布

原创最新推荐文章于 2025-05-24 10:06:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#纯组件 #PureComponent

react 专栏收录该内容

38 篇文章

订阅专栏

本文介绍React中纯组件(PureComponent)的使用方法及其如何通过浅层对比优化组件的渲染性能，包括值类型与引用类型的对比原理，以及如何正确更新state以避免不必要的渲染。

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

纯组件的作用：内部自动在shouldComponentUpdate钩子函数中帮我们进行了比对，不需要我们手动来进行比对

使用方法：之前我们使用组件都是继承React.Component，而我们想要使用纯组件的话，只需要继承React.PureComponent即可。

纯组件内部的对比是shallow compare（浅层对比）两种类型
值类型：比较两个值是否相同
引用类型：只比对对象引用地址是否相同

注：state或props中属性值为引用类型时，应该创建新数据，不要修改原数据

浅层对比的原理：

在父组件中使用PureComponent

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.PureComponent {
  state = {
    number: 0
  }
  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  render() {
    console.log('父组件中的render')
    return (
      <div>
        <h1>随机数：{this.state.number}</h1>
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

在子组件使用PureComponent

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.Component {
  state = {
    number: 0
  }

  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  render() {
    return (
      <div>
        <NumberBox number={this.state.number} />
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

class NumberBox extends React.PureComponent {
  render() {
    console.log('子组件中的render')
    return <h1>随机数：{this.props.number}</h1>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))