React 第二十六章 React.memo

React.memo 是 React 提供的一个高阶组件,用于对函数组件进行性能优化。

React.memo 的源码实际上就是返回一个 PureComponent 组件:

js 复制代码
function memo(FuncComp){
	return class Memo extends PureComponent{
      render(){
           return <>{FuncComp(this.props)}</>
        }
    }
}

官方地址: https://zh-hans.legacy.reactjs.org/docs/react-api.html#reactmemo

React.memo 接受一个组件作为参数,并返回一个新的优化过的组件。这个新的组件在接收到新的 props 时,会进行浅比较来判断是否需要重新渲染。

使用 React.memo 可以避免不必要的重新渲染,提高组件的性能。

使用方法如下:

js 复制代码
import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  // ...
});

export default MyComponent;

需要注意的是,React.memo 默认只进行浅比较,如果组件的 props 是一个复杂对象,需要自定义比较函数来判断是否需要重新渲染。

比较函数需要返回一个布尔值

  • true 表示不重新渲染
  • false 表示重新渲染。

比较函数可以通过第二个参数传入 React.memo

jsx 复制代码
import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  // ...
}, (prevProps, nextProps) => {
  // 自定义比较函数
  // 返回 true 或 false
});

React.memo 可以应用于函数组件和类组件,但是对于类组件,它只会对 props 进行浅比较。如果需要对类组件的 state 进行优化,可以考虑使用 React.PureComponent

相关推荐
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
爱编程的喵9 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
阳火锅9 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊9 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a9 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法9 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言