React解决组件无用渲染问题--函数组件--React.memo()

最新推荐文章于 2025-04-18 04:56:01 发布

我是一个粉刷匠呀

最新推荐文章于 2025-04-18 04:56:01 发布

阅读量667

点赞数

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

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

版权

react 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何利用React.memo在函数组件中减少不必要的渲染。通过将组件包裹在React.memo中，可以提高性能，只有当props改变时组件才会重新渲染。

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

React.memo(…)是React v16.6引进来的新属性。它的作用和React.PureComponent类似，是用来控制函数组件的重新渲染的。React.memo(…) 其实就是函数组件的React.PureComponent。

1.创建一个函数组件

import React from 'react';

const Com = (props) =>{
	return (
		<div>{props.count}</div>
	)
}

export default Com;

//--------------------------
<Com count={77}/>

2.具体使用(将组件作为参数传入React.memo中)

import React from 'react';
//-------------------------------
export default React.memo((props) =>{
//-------------------------------
	return (
		<div>{props.count}</div>
	)
})