React.memo 速查：提升 React 应用效率的利器 – wiki大全

作者： /

React.memo 速查：提升 React 应用效率的利器

在 React 应用的开发中，性能优化是一个永恒的话题。虽然 React 自身已经非常高效，但在复杂的应用场景下，不必要的组件重新渲染仍然可能成为性能瓶颈。这时，React.memo 就如同一把锋利的工具，帮助我们精准地优化功能组件，避免不必要的渲染，从而显著提升应用的响应速度和用户体验。

什么是 React.memo？

React.memo 是 React 提供的一个高阶组件（Higher-Order Component, HOC）。它的作用类似于类组件中的 PureComponent，但专为函数组件设计。当一个函数组件被 React.memo 包裹时，React 会记忆（memoize）该组件的渲染结果。只有当组件的 props 发生变化时，它才会重新渲染；否则，它会复用上一次渲染的结果。

核心思想：
React.memo 通过比较组件的 props 来决定是否重新渲染。如果 props 没有变化，则跳过组件的渲染，直接使用上次的渲染结果。

为什么需要 React.memo？

默认情况下，当父组件重新渲染时，其所有子组件（无论是函数组件还是类组件）都会无条件地重新渲染，即使它们的 props 并没有改变。在小型应用中这通常不是问题，但在大型、复杂的应用中，如果存在大量子组件，或者某个子组件的渲染成本很高，这种默认行为就会导致性能下降。

考虑以下场景：

  1. 纯展示型组件： 某些组件只负责展示数据，不包含内部状态，其渲染结果只依赖于 props。如果 props 未变，就没有必要重新渲染。
  2. 列表中的子项： 在渲染大型列表时，每个列表项都是一个组件。如果只有少数几个列表项的数据发生变化，我们不希望所有列表项都重新渲染。
  3. 计算密集型渲染： 某些组件的渲染过程涉及复杂的计算，耗时较长。通过 React.memo 可以避免这些昂贵的重复计算。

在这些情况下，React.memo 能够有效地减少不必要的渲染，提高应用的运行效率。

如何使用 React.memo？

使用 React.memo 非常简单，只需将你的函数组件作为参数传递给它即可：

“`jsx
import React from ‘react’;

const MyComponent = ({ propA, propB }) => {
console.log(‘MyComponent is rendering…’);
return (

Prop A: {propA}

Prop B: {propB}

);
};

// 使用 React.memo 包裹组件
export default React.memo(MyComponent);
“`

现在，MyComponent 只会在 propA 或 propB 发生变化时才重新渲染。

React.memo 的工作原理：浅比较（Shallow Comparison）

React.memo 默认执行的是 props 的浅比较。这意味着它会逐个比较 props 对象中的属性：

  • 基本类型（string, number, boolean, null, undefined, symbol）: 比较它们的值是否相等。
  • 引用类型（object, array, function）: 比较它们的引用地址是否相同。

示例说明：

“`jsx
const MyComponent = React.memo(({ data, onClick }) => {
console.log(‘MyComponent rendering’);
return (

Data: {data.value}

);
});

function ParentComponent() {
const [count, setCount] = React.useState(0);
const [obj, setObj] = React.useState({ value: 10 });

// 情况一：基本类型 prop 变化
// setCount(count + 1) 会导致 MyComponent 重新渲染 (如果 data 是 count)

// 情况二：引用类型 prop 变化，但引用地址不变
// const handleClick = () => { / … / };
// 每次 ParentComponent 渲染，handleClick 都会是一个新的函数引用，导致 MyComponent 重新渲染
// 解决办法：使用 useCallback
const handleClick = React.useCallback(() => {
console.log(‘Clicked!’);
}, []); // 依赖项为空数组，函数引用不会变

// 情况三：引用类型 prop 变化，引用地址变化
// setObj({ value: obj.value + 1 }) 会导致 MyComponent 重新渲染
// setObj(obj) 不会引起渲染，因为引用地址没变（但实际开发中通常不会这么做）

return (



);
}
“`

在上述例子中：
* 如果 data 是一个对象，即使其内部属性 value 发生了变化，但如果 data 对象的引用地址没有变（例如，你直接修改了 obj.value 而没有创建新对象），React.memo 会认为 data prop 没有变化，从而跳过渲染。这是引用类型浅比较的陷阱。
* onClick 是一个函数。每次 ParentComponent 渲染时，如果 handleClick 没有被 useCallback 包裹，它都会被重新创建，导致 onClick prop 的引用地址改变，MyComponent 也会因此重新渲染。

自定义比较函数

如果默认的浅比较不满足你的需求，React.memo 允许你传入第二个参数，一个自定义的比较函数。这个函数接收旧的 props 和新的 props 作为参数，并返回一个布尔值：

  • true: 表示 props 相等，不需要重新渲染。
  • false: 表示 props 不相等，需要重新渲染。

“`jsx
import React from ‘react’;

const MyComplexComponent = ({ user, settings }) => {
console.log(‘MyComplexComponent is rendering…’);
return (

User Name: {user.name}

Theme: {settings.theme}

);
};

// 自定义比较函数
function arePropsEqual(prevProps, nextProps) {
// 只有当 user.id 和 settings.theme 都没变时，才认为 props 相等
// 否则，如果任一 prop 深度嵌套的某个值变了，或者引用变了，都可以控制
return (
prevProps.user.id === nextProps.user.id &&
prevProps.settings.theme === nextProps.settings.theme
);
}

export default React.memo(MyComplexComponent, arePropsEqual);
“`

注意事项：
* 自定义比较函数应该是一个纯函数。
* 这个函数非常强大，但也需要谨慎使用。错误的比较逻辑可能会导致组件不更新，从而出现 UI bug。
* 只有在你确定默认的浅比较不足以应对你的复杂 props 结构时，才考虑使用自定义比较函数。

什么时候使用 React.memo？

React.memo 并不是银弹，过度使用它反而会引入额外的比较开销，适得其反。以下是一些使用 React.memo 的建议：

  1. 组件渲染开销大： 如果组件的渲染逻辑复杂、计算量大，或者内部包含大量子组件，导致渲染时间较长，那么考虑使用 React.memo。
  2. 纯函数组件： 当组件是纯函数，并且在给定相同的 props 和 state 时总是渲染相同的结果，React.memo 会非常有效。
  3. 父组件频繁更新，子组件 props 稳定： 当父组件因为自身状态变化频繁渲染，但某个子组件接收的 props 并不经常改变时，React.memo 可以避免子组件的无效重渲。

什么时候不使用 React.memo？

  1. 组件渲染成本低： 如果组件的渲染速度非常快，React.memo 的 props 比较开销可能比组件自身渲染的开销还要大，反而会降低性能。
  2. props 几乎每次都变化： 如果组件的 props 几乎每次父组件渲染时都会发生变化（例如，接收一个不断变化的 value），那么 React.memo 就没有意义，因为它总会重新渲染。
  3. 内部有 useState 或 useReducer： 含有内部状态的组件，其渲染不仅仅依赖于 props。虽然 React.memo 仍然可以优化其 props 变化的场景，但当内部状态更新时，组件依然会重新渲染。
  4. 子组件内部有 Context 消费： 当组件通过 useContext 消费上下文时，Context 的变化会强制组件重新渲染，即使 props 没有变化。

搭配 useCallback 和 useMemo 使用

React.memo 常常与 useCallback 和 useMemo 配合使用，以解决引用类型 props 带来的问题：

  • useCallback： 记忆函数。当你将函数作为 props 传递给一个 memoized 的子组件时，使用 useCallback 可以确保父组件重新渲染时，函数引用地址不变，从而避免子组件不必要的重新渲染。

    jsx
    const handleClick = useCallback(() => {
    // ...
    }, [dependency1, dependency2]); // 只有当依赖项变化时，函数才重新创建
    <MemoizedChild onClick={handleClick} />

  • useMemo： 记忆计算结果。当你需要将一个计算结果（如一个对象或数组）作为 props 传递给 memoized 的子组件时，使用 useMemo 可以确保只有当依赖项变化时，这个计算结果才重新计算并返回新的引用。

    jsx
    const memoizedData = useMemo(() => {
    return { value: count * 2 };
    }, [count]); // 只有当 count 变化时，对象才重新创建
    <MemoizedChild data={memoizedData} />

总结

React.memo 是 React 性能优化工具箱中的一个重要成员，它通过浅比较 props 来避免函数组件不必要的重新渲染。正确地使用它，并配合 useCallback 和 useMemo，可以在许多场景下显著提升 React 应用的性能。

然而，请记住，优化应基于测量而非猜测。在应用出现性能问题时，首先使用 React DevTools 等工具进行性能分析，找出瓶颈所在，然后再有针对性地使用 React.memo 或其他优化手段。避免过度优化，因为这可能会增加代码复杂性而带来的收益却微乎其微。

通过理解和掌握 React.memo，你将能够更高效地构建你的 React 应用，为用户提供更加流畅和响应迅速的体验。

滚动至顶部