React中的pureComponent纯组件

最新推荐文章于 2025-05-12 17:18:36 发布

原创最新推荐文章于 2025-05-12 17:18:36 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

React 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用React的PureComponent进行性能优化。PureComponent通过浅比较props和state来减少不必要的组件更新，提升应用的运行效率。示例展示了将一个简单的Component转换为PureComponent的过程，并解释了其工作原理。

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

1.实现性能优化

import React,{Component,PureComponent} from 'react'
export default class pureComponentpage extends PureComponent {
    constructor(props) {
        super(props)
        this.state={
            count: 0//浅比较
        }
    }
    setCount=()=>{
        this.setState({
            count:100
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.setCount}>{this.props.count}</button>	
            </div>
        )
    }
}

2.必须是class组件形式，浅比较
3.pureComponent与Component关联

PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent中以浅层对比 prop 和 state的方式来实现了该函数。