FrontEnd Interview

Appearance

18React渲染优化细节：避免不必要的重渲染 ​

引言：为什么需要渲染优化？ ​

React的核心优势之一是"声明式编程" ——开发者只需描述UI应该是什么样子，React负责高效地更新DOM。但在复杂应用中，即使状态微小变化，也可能导致大量组件不必要的重渲染（re-render），引发性能问题（如页面卡顿、交互延迟）。

渲染优化的核心目标是：减少不必要的组件重渲染，只在状态或属性真正变化时更新。本文将深入解析React.memo、useMemo、 useCallback的使用场景，以及列表渲染的优化技巧，帮你写出高性能的React组件。

一、React.memo：缓存函数组件的渲染结果 ​

React.memo是一个高阶组件（HOC），用于缓存函数组件的渲染结果。当组件的props未发生变化时，它会复用上次的渲染结果，避免不必要的重渲染。

1.1 基本使用：避免props不变时的重渲染 ​

默认情况下，父组件重渲染时，子组件会无条件跟着重渲染，即使props没有变化。React.memo可以阻止这种行为。

示例：未优化的子组件

jsx
// 子组件：即使props不变，父组件重渲染时也会跟着重渲染
const UserInfo = (props) => {
    console.log("UserInfo 重渲染了"); // 用于观察重渲染
    return <div>{props.name}</div>;
};

// 父组件：状态变化会导致自身重渲染
const Parent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>count: {count}</button>
            <UserInfo name="张三"/> {/* props未变，但会跟着重渲染 */}
        </div>
    );
};

问题：点击按钮时，count变化导致Parent重渲染，UserInfo的props（name="张三"）并未变化，但仍会重渲染（控制台输出" UserInfo 重渲染了"）。

用React.memo优化

jsx
// 用React.memo包裹子组件：props不变时不重渲染
const UserInfo = React.memo((props) => {
    console.log("UserInfo 重渲染了");
    return <div>{props.name}</div>;
});

// 父组件同上...

效果：点击按钮时，UserInfo的props未变，因此不会重渲染（控制台不再输出）。

1.2 局限性：浅比较props的陷阱 ​

React.memo默认对props进行浅比较（shallow comparison）：

  • 基本类型（string、number、boolean）：比较值是否相等；
  • 引用类型（object、array、function）：比较引用是否相同（而非内容）。

当props包含引用类型时，即使内容相同，只要引用变化，React.memo就会认为props变化，触发重渲染。

示例：引用类型props导致React.memo失效

jsx
const UserInfo = React.memo(({user}) => {
    console.log("UserInfo 重渲染了");
    return <div>{user.name}</div>;
});

const Parent = () => {
    const [count, setCount] = useState(0);
    // 每次渲染都会创建新对象（引用变化）
    const user = {name: "张三"};

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>count: {count}</button>
            <UserInfo user={user}/> {/* user引用变化，导致重渲染 */}
        </div>
    );
};

问题：user是每次渲染时创建的新对象（引用不同），即使内容相同，React.memo也会认为props变化，导致UserInfo重渲染。

1.3 解决方案：配合useMemo和useCallback ​

要解决引用类型props的问题，需确保引用稳定：

  • 对于对象/数组：用useMemo缓存值（保持引用不变）；
  • 对于函数：用useCallback缓存函数引用（保持引用不变）。

1.3.1 用useMemo缓存对象/数组props ​

jsx
const Parent = () => {
    const [count, setCount] = useState(0);
    // 用useMemo缓存对象：依赖不变时，引用不变
    const user = useMemo(() => ({name: "张三"}), []); // 空依赖：只创建一次

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>count: {count}</button>
            <UserInfo user={user}/> {/* user引用稳定，不再重渲染 */}
        </div>
    );
};

1.3.2 用useCallback缓存函数props ​

jsx
const UserInfo = React.memo(({user, onNameChange}) => {
    console.log("UserInfo 重渲染了");
    return (
        <div>
            {user.name}
            <button onClick={onNameChange}>修改名字</button>
        </div>
    );
});

const Parent = () => {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({name: "张三"});

    // 用useCallback缓存函数：依赖不变时，引用不变
    const handleNameChange = useCallback(() => {
        setUser(u => ({...u, name: "李四"}));
    }, []); // 空依赖：函数引用不变

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>count: {count}</button>
            <UserInfo user={user} onNameChange={handleNameChange}/>
        </div>
    );
};

效果：handleNameChange的引用通过useCallback保持稳定，即使Parent重渲染，UserInfo的props引用不变，因此不会重渲染。

1.4 React.memo的使用场景 ​

  • 纯展示组件：只依赖props渲染，无内部状态或副作用；
  • 频繁重渲染的子组件：如列表项、表格单元格等，父组件频繁更新但子组件props变化少；
  • 渲染成本高的组件：如包含复杂计算、大量DOM元素的组件。

注意：避免过度使用React.memo——简单组件的重渲染成本很低，缓存本身也有开销（浅比较的计算成本）。

二、useMemo与useCallback：缓存值与函数引用 ​

useMemo和useCallback都是React提供的用于缓存计算结果的Hook，核心作用是减少不必要的计算和引用变化导致的重渲染。

2.1 useMemo：缓存昂贵计算的结果 ​

useMemo用于缓存值（通常是昂贵计算的结果），避免每次渲染时重复执行计算。

语法：

jsx
const memoizedValue = useMemo(() => {
    // 昂贵的计算逻辑
    return result;
}, [dependencies]); // 依赖数组：依赖变化时重新计算

示例：优化昂贵计算

jsx
// 未优化：每次渲染都执行昂贵计算
const ExpensiveComponent = ({numbers}) => {
    // 模拟昂贵计算（如排序大数组）
    const sortedNumbers = numbers.sort((a, b) => a - b); // 每次渲染都执行

    return <div>{sortedNumbers.join(", ")}</div>;
};

// 用useMemo优化：依赖不变时复用计算结果
const ExpensiveComponent = ({numbers}) => {
    // 依赖numbers变化时才重新排序
    const sortedNumbers = useMemo(() => {
        return [...numbers].sort((a, b) => a - b); // 复制数组避免修改原数据
    }, [numbers]); // 依赖数组：numbers变化时重新计算

    return <div>{sortedNumbers.join(", ")}</div>;
};

注意：

  • useMemo的回调函数应是纯函数（无副作用）；
  • 只用于昂贵的计算（如大数组排序、复杂数据转换），简单计算无需缓存；
  • 返回值可以是任何类型（基本类型、对象、数组等）。

2.2 useCallback：缓存函数的引用 ​

useCallback用于缓存函数的引用，避免每次渲染时创建新的函数实例，常用于稳定传递给子组件的回调函数。

语法：

jsx
const memoizedCallback = useCallback(() => {
    // 函数逻辑
}, [dependencies]); // 依赖数组：依赖变化时重新创建函数

示例：稳定回调函数引用

jsx
// 未优化：每次渲染创建新函数，导致子组件重渲染
const Parent = () => {
    const [count, setCount] = useState(0);

    // 每次渲染创建新函数（引用变化）
    const handleClick = () => {
        console.log("点击了");
    };

    return <Child onClick={handleClick}/>;
};

// 用useCallback优化：函数引用稳定
const Parent = () => {
    const [count, setCount] = useState(0);

    // 依赖不变时，函数引用不变
    const handleClick = useCallback(() => {
        console.log("点击了");
    }, []); // 空依赖：函数永久缓存

    return <Child onClick={handleClick}/>;
};

注意：

  • useCallback(fn, deps)等价于useMemo(() => fn, deps)；
  • 当函数依赖于组件内的状态/变量时，需将依赖加入依赖数组（否则可能捕获旧值）；
    jsx
    // 正确：依赖count，加入依赖数组
const logCount = useCallback(() => {
  console.log(count);
}, [count]); // count变化时，函数重新创建

2.3 核心区别与选择 ​

Hook缓存内容典型用途本质等价
useMemo计算结果（值）优化昂贵的计算逻辑useMemo(() => value, deps)
useCallback函数引用稳定传递给子组件的回调函数useMemo(() => fn, deps)

选择原则：

  • 需要缓存值（尤其是对象/数组）→ 用useMemo；
  • 需要缓存函数（尤其是作为props传递时）→ 用useCallback。

三、列表渲染优化：key的正确使用 ​

列表是React应用中最常见的场景之一（如商品列表、评论列表），列表渲染的性能直接影响整体体验。key是列表优化的核心，正确使用 key能避免不必要的DOM操作和状态丢失。

3.1 key的作用：标识节点的唯一性 ​

key是React用于识别列表中元素的唯一标识，其核心作用是：

  • 帮助React判断节点是"新增"、"删除"还是"移动"；
  • 确保重新渲染时能复用已有节点（而非销毁重建），保留节点状态（如输入框内容、滚动位置）。

3.2 避免使用索引作为key ​

初学者常将数组索引（index）作为key，但这在列表发生增删、排序时会导致严重问题。

示例：用索引作为key的问题

jsx
// 初始列表：[ {id: 1, name: 'A'}, {id: 2, name: 'B'} ]
const List = ({items}) => {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}> {/* 用索引作为key */}
                    <input placeholder={item.name}/>
                    <button onClick={() => handleDelete(index)}>删除</button>
                </li>
            ))}
        </ul>
    );
};

问题场景：删除第一个元素（A）后，列表变为[ {id: 2, name: 'B'} ]：

  • 原索引0对应A，删除后索引0对应B（key不变）；
  • React会认为"索引0的节点未变"，复用原有节点，导致输入框内容错误保留（B的输入框显示A的内容）。

3.3 正确使用key：唯一且稳定的标识 ​

key应满足两个条件：

  1. 唯一性：同一列表中key必须唯一；
  2. 稳定性：节点的key不应随位置变化（如数据的唯一ID）。

优化示例：用数据ID作为key

jsx
const List = ({items}) => {
    return (
        <ul>
            {items.map((item) => (
                <li key={item.id}> {/* 用数据的唯一ID作为key */}
                    <input placeholder={item.name}/>
                    <button onClick={() => handleDelete(item.id)}>删除</button>
                </li>
            ))}
        </ul>
    );
};

效果：删除A后，B的key（2）不变，React会正确复用B的节点，输入框内容保持正确。

3.4 无唯一ID时的替代方案 ​

若列表项确实没有唯一ID（如临时生成的列表），可通过内容哈希生成稳定key（不推荐用索引）：

jsx
import {unstable_createRoot} from 'react-dom';
import {hash} from 'ohash'; // 需安装ohash库

const List = ({items}) => {
    return (
        <ul>
            {items.map((item) => (
                // 用内容哈希作为key（内容不变则key不变）
                <li key={hash(item)}>
                    {item.content}
                </li>
            ))}
        </ul>
    );
};

3.5 列表渲染的其他优化 ​

  • 虚拟列表：对于超长列表（如1000+项），使用虚拟列表库（如react-window、react-virtualized），只渲染可视区域的项；
  • 分页加载：将长列表分为多页，每次只加载当前页数据；
  • 懒加载：滚动到列表底部时再加载更多数据（配合IntersectionObserver）。

四、总结：渲染优化的核心原则 ​

  1. 避免不必要的重渲染：

    • 用React.memo缓存纯展示组件，配合useMemo（缓存对象/数组）和useCallback（缓存函数）确保props引用稳定；
    • 只在渲染成本高或频繁重渲染的组件上使用这些API，避免过度优化。

  2. 合理缓存计算结果：

    • useMemo用于优化昂贵的计算（如大数组排序）；
    • useCallback用于稳定传递给子组件的回调函数，防止子组件不必要重渲染。

  3. 正确使用列表key：

    • 用数据的唯一ID作为key，确保唯一性和稳定性；
    • 绝对避免在可能增删、排序的列表中用索引作为key。

渲染优化的核心是"只做必要的更新"。在实际开发中，应先通过React DevTools的"Profiler" 工具定位性能瓶颈，再针对性优化，而非盲目添加缓存API——过度优化可能导致代码复杂且性能反降。