React 中React.memo的作用,如何利用它进行组件性能优化?

大白话React 中React.memo的作用,如何利用它进行组件性能优化?

React.memo 是啥玩意儿

在 React 里,组件渲染是很频繁的事儿。每次父组件状态变了,子组件就可能会重新渲染,哪怕子组件的 props 压根儿没变化。这就好比你去超市,只买了瓶饮料,收银员却把整个货架都重新整理一遍,纯属浪费时间和精力。而 React.memo 就是来解决这个问题的,它能让组件"记着"之前的渲染结果,要是 props 没变化,就直接用之前的结果,不用重新渲染,这样能大大提升性能。

怎么用 React.memo

React.memo 是一个高阶组件,你把它套在你的组件外面,它就会帮你比较前后两次的 props。要是一样,就不重新渲染组件。下面咱来看看具体代码:

javascript 复制代码
// 导入 React 库,因为要用到 React.memo
import React from 'react';

// 定义一个简单的组件,这个组件接收一个 name 属性
const MyComponent = React.memo((props) => {
    // 打印日志,方便我们知道组件什么时候渲染了
    console.log('MyComponent 渲染了');
    // 返回一个简单的 JSX 元素,显示传入的 name 属性
    return <div>Hello, {props.name}!</div>;
});

// 定义一个父组件
const ParentComponent = () => {
    // 定义一个状态变量 count,初始值为 0
    const [count, setCount] = React.useState(0);
    // 定义一个函数,用于增加 count 的值
    const handleClick = () => {
        setCount(count + 1);
    };

    return (
        <div>
            {/* 显示 count 的值 */}
            <p>Count: {count}</p>
            {/* 点击按钮,调用 handleClick 函数增加 count 的值 */}
            <button onClick={handleClick}>增加计数</button>
            {/* 使用 MyComponent 组件,传入 name 属性 */}
            <MyComponent name="World" />
        </div>
    );
};

// 导出父组件,方便在其他地方使用
export default ParentComponent;

代码解释

  1. MyComponent 组件

    • 这是一个简单的函数组件,接收一个 name 属性。
    • React.memo 把它包起来,这样当 MyComponentprops 没变化时,就不会重新渲染。
    • 里面有个 console.log,每次渲染都会打印日志,方便我们观察。
  2. ParentComponent 组件

    • 有个 count 状态变量,初始值是 0。
    • 有个按钮,点击后会调用 handleClick 函数,让 count 的值加 1。
    • 里面使用了 MyComponent 组件,传入 name 属性为 World

使用场景

  • 纯展示组件 :如果一个组件只是根据传入的 props 来展示内容,没有自己的状态,也不做什么副作用操作,那就可以用 React.memo 包起来。比如上面的 MyComponent,它只根据 name 属性来显示内容。
  • 频繁渲染的组件 :要是一个组件在父组件每次渲染时都会跟着渲染,但它的 props 大部分时间都不变,那就用 React.memo 优化一下。比如列表里的每个列表项组件。

注意事项

  • React.memo 只比较 props 的浅层次变化。要是 props 里有对象或者数组,而且这些对象或数组的引用变了,哪怕里面的值没变,组件也会重新渲染。
  • 要是你需要自定义比较逻辑,可以给 React.memo 传入第二个参数,它是一个函数,用来比较前后两次的 props
jsx 复制代码
// 自定义比较函数
const areEqual = (prevProps, nextProps) => {
    // 这里可以写自定义的比较逻辑
    return prevProps.name === nextProps.name;
};

// 使用自定义比较函数的 MyComponent
const MyComponentWithCustomCompare = React.memo((props) => {
    console.log('MyComponentWithCustomCompare 渲染了');
    return <div>Hello, {props.name}!</div>;
}, areEqual);

这样,你就可以根据自己的需求来控制组件是否重新渲染啦。

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端