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);

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

相关推荐
林太白几秒前
NestJS-申请模块
前端·后端·nestjs
林太白3 分钟前
NestJS-文章数据模块
前端·javascript·nestjs
林太白6 分钟前
NestJS-通告数据模块
前端·nestjs
七月十二8 分钟前
[mind-elixir]Mind-Elixir 的交互增强:单击、双击与鼠标 Hover 功能实现
前端
Antonio9158 分钟前
【音视频】WebRTC-Web 音视频采集与播放
前端·音视频·webrtc
一只卡比兽9 分钟前
React `useRef` Hook: 全面解析
前端
林太白10 分钟前
Rust知识篇05-所有权和借用
前端·后端·rust
用户187294225083911 分钟前
深入剖析 JavaScript 闭包
javascript
wordbaby12 分钟前
关于 CSS 线性渐变角度(linear-gradient 角度含义及记忆方法)
前端·css
归于尽14 分钟前
我扒光了mitt的源码,发现了这些不为人知的秘密
前端·typescript