React 性能优化：memo、useMemo 与 useCallback 用法-程序员充电站

你在 React 项目开发中，是不是遇到过组件无意义重复渲染、复杂计算耗时过长的问题？比如父组件仅仅修改自身状态，子组件却跟着重新渲染；每次渲染都执行复杂的数组过滤、排序，导致页面卡顿。React 提供的 memo、useMemo、useCallback 三个优化工具，能精准解决这些性能痛点，让组件渲染更高效。本文结合实战代码，带你吃透这三个工具的核心用法，轻松实现 React 项目性能优化。

一、核心认知：三个工具的优化定位

在使用之前，先明确三者的优化场景，避免用错地方反而增加代码复杂度：

memo：用于优化函数组件的重复渲染，针对「组件本身无变化却因父组件渲染而被迫渲染」的场景，相当于类组件的 PureComponent。
useMemo：用于缓存复杂计算的结果，避免每次组件渲染都重复执行耗时计算，返回的是「计算结果」。
useCallback：用于缓存函数的引用，避免每次组件渲染都创建新的函数实例，返回的是「函数本身」。

三者的核心共性：通过缓存减少不必要的计算和渲染，提升组件执行效率。

二、实战一：memo 优化组件重复渲染

memo 是一个高阶组件，接收一个函数组件作为参数，返回一个优化后的组件。它会浅比较组件的 props，只有当 props 发生变化时，组件才会重新渲染。

1. 未优化的问题示例

父组件修改自身状态，子组件无 props 变化却跟着重复渲染：

import React, { useState } from 'react'; // 子组件：无 props 依赖，却会随父组件渲染而重复渲染 function ChildComponent() { console.log('子组件：无意义重复渲染了'); return <div style={{ marginTop: '20px' }}>我是子组件，无 props 传入</div>; } // 父组件 function ParentComponent() { const [count, setCount] = useState(0); return ( <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}> <h3>父组件计数器：{count}</h3> <button onClick={() => setCount(count + 1)}>点击+1</button> <ChildComponent /> </div> ); } export default ParentComponent;

2. 使用 memo 优化后的示例

import React, { useState, memo } from 'react'; // 优化：用 memo 包裹子组件，避免无意义重复渲染 const ChildComponent = memo(() => { console.log('子组件：只有 props 变化才会渲染'); return <div style={{ marginTop: '20px' }}>我是子组件，无 props 传入</div>; }); // 父组件（代码不变） function ParentComponent() { const [count, setCount] = useState(0); return ( <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}> <h3>父组件计数器：{count}</h3> <button onClick={() => setCount(count + 1)}>点击+1</button> <ChildComponent /> </div> ); } export default ParentComponent;

3. memo 核心说明

memo 仅做「浅比较」：如果 props 是对象/数组类型，仅比较引用地址，不深入比较内部属性；
若需深比较，可传递第二个参数（自定义比较函数），但不推荐（深比较本身会消耗性能）；
memo 仅优化子组件因父组件渲染导致的无意义渲染，若组件自身状态变化，仍会正常渲染。

三、实战二：useCallback 缓存函数引用

当父组件向子组件传递函数 props 时，每次父组件渲染都会创建新的函数实例，导致子组件的 props 引用变化，即使使用 memo 也无法阻止子组件重复渲染。此时需要 useCallback 缓存函数引用。

优化示例

import React, { useState, memo, useCallback } from 'react'; // 子组件：接收函数 props const ChildComponent = memo(({ onHandleClick }) => { console.log('子组件：函数 props 引用未变化，不渲染'); return <button onClick={onHandleClick} style={{ marginTop: '10px' }}>子组件按钮</button>; }); // 父组件 function ParentComponent() { const [count, setCount] = useState(0); // 优化：用 useCallback 缓存函数，仅当依赖变化时才创建新函数 const handleChildClick = useCallback(() => { console.log('子组件按钮被点击'); }, []); // 空依赖：函数引用永久缓存，除非组件卸载 return ( <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}> <h3>父组件计数器：{count}</h3> <button onClick={() => setCount(count + 1)}>点击+1</button> <ChildComponent onHandleClick={handleChildClick} /> </div> ); } export default ParentComponent;

useCallback 核心说明

useCallback 接收两个参数：需要缓存的函数、依赖数组；
只有当依赖数组中的变量发生变化时，才会创建新的函数实例，否则返回缓存的函数引用；
通常与 memo 配合使用，单独使用 useCallback 无优化意义。

四、实战三：useMemo 缓存复杂计算结果

当组件中存在复杂计算（如大数据数组排序、过滤、数学运算）时，每次组件渲染都会重复执行这些计算，消耗大量性能。useMemo 可以缓存计算结果，仅当依赖变化时才重新计算。

优化示例

import React, { useState, useMemo } from 'react'; // 模拟复杂计算：大数据数组过滤与排序 function complexCalculation(list) { console.log('执行复杂计算...'); return list.filter(item => item > 50).sort((a, b) => b - a); } function CalculationDemo() { const [count, setCount] = useState(0); // 模拟大数据数组 const numberList = [12, 67, 89, 34, 90, 56, 78, 23]; // 优化：用 useMemo 缓存计算结果，仅当 numberList 变化时才重新计算 const resultList = useMemo(() => { return complexCalculation(numberList); }, [numberList]); // 依赖：仅 numberList 变化时重新计算 return ( <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px' }}> <h3>父组件计数器：{count}</h3> <button onClick={() => setCount(count + 1)}>点击+1</button> <div style={{ marginTop: '20px' }}> <h4>复杂计算结果（大于50的数降序排列）：</h4> <p>{resultList.join(', ')}</p> </div> </div> ); } export default CalculationDemo;

useMemo 核心说明