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

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

相关推荐
前端御书房2 分钟前
基于 Trae 的超轻量级前端架构设计与性能优化实践
前端·性能优化
南部余额8 分钟前
playwright解决重复登录问题,通过pytest夹具自动读取storage_state用户状态信息
前端·爬虫·python·ui·pytest·pylawright
前端与小赵18 分钟前
webpack和vite之间的区别
前端·webpack·vite
zy01010121 分钟前
React受控表单绑定
前端·javascript·react.js·mvvm·双向数据绑定
百锦再22 分钟前
React编程的核心概念:数据流与观察者模式
前端·javascript·vue.js·观察者模式·react.js·前端框架·ecmascript
2401_8724878824 分钟前
网络安全之前端学习(css篇2)
前端·css·学习
SuperYing34 分钟前
前端候选人突围指南:让面试官主动追着要简历的五大特质(个人总结版)
前端·面试
前端双越老师37 分钟前
我的编程经验与认知
前端
linweidong43 分钟前
前端Three.js面试题及参考答案
前端·javascript·vue.js·typescript·前端框架·three.js·前端面经
GISer_Jing1 小时前
前端常问的宏观“大”问题详解(二)
linux·前端·ubuntu