React解决组件无用渲染问题--类组件--PureComponent

最新推荐文章于 2025-04-12 18:15:07 发布

我是一个粉刷匠呀

最新推荐文章于 2025-04-12 18:15:07 发布

阅读量306

点赞数

分类专栏： react 文章标签： react components

本文链接：https://blog.youkuaiyun.com/weixin_42215167/article/details/119607785

版权

react 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在React中利用PureComponent优化组件更新，通过浅比较state和props来防止不必要的渲染，包括创建类组件和应用PureComponent的步骤。

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

(理论)React在进行组件更新时，如果发现这个组件是一个PureComponent，它会将组件现在的state和props和其下一个state和props进行浅比较，如果它们的值没有变化，就不会进行更新。

1.创建一个类组件

import React from 'react';

class Com extends React.Component {
	constructor(props){
		super(props);
		this.state={
			count: 0
		}
	}

	render(){
		return (
			<div>
				<span>{this.state.count}</span>
				<button onClick={()=>{this.setState({count: 1})}}></button>
			</div>
		)
	}
}

export default Com;

2.纯组件的使用

import React from 'react';
//-------------------------------------
class Com extends React.PureComponent {
//-------------------------------------
	constructor(props){
		super(props);
		this.state={
			count: 0
		}
	}

	render(){
		return (
			<div>
				<span>{this.state.count}</span>
				<button onClick={()=>{this.setState({count: 1})}}></button>
			</div>
		)
	}
}

export default Com;