MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 避免不必要的重新渲染技巧

2024-06-036.6k 阅读

理解 React 中的重新渲染

在 React 应用开发中，重新渲染是一个核心概念。当组件的 props 或 state 发生变化时，React 会重新调用组件函数，这一过程被称为重新渲染。虽然重新渲染是 React 实现动态 UI 更新的关键机制，但不必要的重新渲染可能会导致性能问题，尤其是在大型应用中。

React 的设计原则是基于组件的不可变数据和声明式编程。当 React 检测到组件的 props 或 state 改变时，它会重新评估组件的渲染函数，生成一个新的虚拟 DOM 树，并与之前的虚拟 DOM 树进行比较（这一过程称为 diffing），然后根据比较结果更新实际的 DOM。然而，如果不必要的重新渲染频繁发生，diffing 算法的开销和实际 DOM 更新的成本就会显著增加，影响应用的性能。

例如，考虑一个简单的计数器组件：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

在这个组件中，每次点击按钮，count 状态改变，组件会重新渲染。这是预期的行为，因为 UI 需要反映 count 的新值。但在更复杂的应用中，可能会出现一些并非有意导致重新渲染的情况。

React 重新渲染的触发原因

  1. props 变化：当父组件向子组件传递新的 props 时，子组件会重新渲染。例如：
import React from'react';

const ChildComponent = ({ value }) => {
  return <p>{value}</p>;
};

const ParentComponent = () => {
  const [data, setData] = React.useState('initial value');
  return (
    <div>
      <ChildComponent value={data} />
      <button onClick={() => setData('new value')}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

在上述代码中，点击按钮更新 data 状态，ParentComponent 会重新渲染，并且由于 data 作为 value prop 传递给 ChildComponent，ChildComponent 也会重新渲染。 2. state 变化：组件内部通过 useState 或 this.setState（在类组件中）改变 state 时，组件会重新渲染。如前面的 Counter 组件示例。 3. context 变化：如果组件订阅了 React 的 context，当 context 的值发生变化时，该组件及其依赖此 context 的子组件都会重新渲染。

避免不必要重新渲染的重要性

不必要的重新渲染会带来多方面的性能问题。首先，重新渲染会消耗 CPU 资源，因为 React 需要重新执行组件的渲染函数并进行虚拟 DOM 的 diffing。在复杂组件中，渲染函数可能包含大量计算，频繁重新执行会导致 CPU 使用率升高。

其次，不必要的 DOM 更新会增加内存开销。每次重新渲染可能会导致 DOM 元素的创建、更新或删除，这些操作都会占用内存。如果应用中有大量组件频繁进行不必要的重新渲染，内存消耗会不断增加，可能导致应用卡顿甚至崩溃。

对于用户体验来说，不必要的重新渲染会使界面响应变慢。用户操作（如点击按钮、滚动页面等）后，界面不能及时、流畅地更新，会降低用户对应用的满意度。

使用 React.memo 优化函数组件

  1. React.memo 基本原理：React.memo 是 React 提供的一个高阶组件，用于对函数组件进行 memoization（记忆化）。它会浅比较组件的 props，如果 props 没有变化，React 会复用之前渲染的结果，避免重新渲染组件。 例如，修改前面的 ChildComponent：
import React from'react';

const ChildComponent = React.memo(({ value }) => {
  return <p>{value}</p>;
});

const ParentComponent = () => {
  const [data, setData] = React.useState('initial value');
  return (
    <div>
      <ChildComponent value={data} />
      <button onClick={() => setData('new value')}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

在这个例子中，ChildComponent 被 React.memo 包裹。当 ParentComponent 重新渲染时，如果 data 没有变化，ChildComponent 不会重新渲染，因为 React.memo 对 value prop 进行了浅比较。 2. 深度比较 props：默认情况下，React.memo 进行浅比较。对于简单数据类型（如字符串、数字、布尔值），浅比较通常足够。但对于复杂数据类型（如对象、数组），浅比较可能无法检测到实际内容的变化。例如：

import React from'react';

const ComplexChildComponent = React.memo(({ obj }) => {
  return <p>{obj.key}</p>;
});

const ComplexParentComponent = () => {
  const [data, setData] = React.useState({ key: 'initial value' });
  return (
    <div>
      <ComplexChildComponent obj={data} />
      <button onClick={() => {
        const newObj = { key: 'new value' };
        setData(newObj);
      }}>Update Data</button>
    </div>
  );
};

export default ComplexParentComponent;

在上述代码中，虽然 newObj 的内容与 data 不同，但由于 React.memo 进行浅比较，它会认为 obj prop 没有变化（因为 data 和 newObj 是不同的对象引用），ComplexChildComponent 不会重新渲染。

为了解决这个问题，可以提供一个自定义的比较函数作为 React.memo 的第二个参数。这个函数接收 prevProps 和 nextProps，并返回一个布尔值表示 props 是否相等。例如：

import React from'react';

const isEqual = (prevProps, nextProps) => {
  return prevProps.obj.key === nextProps.obj.key;
};

const ComplexChildComponent = React.memo(({ obj }) => {
  return <p>{obj.key}</p>;
}, isEqual);

const ComplexParentComponent = () => {
  const [data, setData] = React.useState({ key: 'initial value' });
  return (
    <div>
      <ComplexChildComponent obj={data} />
      <button onClick={() => {
        const newObj = { key: 'new value' };
        setData(newObj);
      }}>Update Data</button>
    </div>
  );
};

export default ComplexParentComponent;

在这个例子中，isEqual 函数进行了深度比较（在这个简单场景下，比较了对象的 key 属性），确保 ComplexChildComponent 在 obj 内容变化时重新渲染。

使用 useMemo 缓存计算结果

  1. useMemo 基本用法：useMemo 是 React 的一个 Hook，用于缓存一个值，只有当它依赖的变量发生变化时才重新计算。它的语法是 const memoizedValue = useMemo(() => computeValue(), dependencies)，其中 computeValue 是一个函数，返回需要缓存的值，dependencies 是一个数组，包含依赖的变量。 例如，假设有一个需要进行复杂计算的组件：
import React, { useMemo } from'react';

const ExpensiveCalculation = ({ a, b }) => {
  const result = useMemo(() => {
    // 模拟复杂计算
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return a + b + sum;
  }, [a, b]);

  return <p>The result is: {result}</p>;
};

export default ExpensiveCalculation;

在这个组件中，result 使用 useMemo 进行了缓存。只有当 a 或 b 发生变化时，才会重新执行复杂的计算。如果 a 和 b 没有变化，result 会复用之前缓存的值，避免了不必要的计算，从而减少了重新渲染时的开销。 2. useMemo 与性能优化：在实际应用中，useMemo 对于性能优化非常重要，尤其是在以下场景： - 计算密集型操作：如复杂的数学计算、数据处理等。通过 useMemo 缓存结果，可以避免在每次重新渲染时都进行这些昂贵的计算。 - 函数返回值缓存：如果组件中某个函数的返回值在多次渲染之间保持不变，可以使用 useMemo 缓存该函数的返回值。例如，一个根据 props 生成配置对象的函数：

import React, { useMemo } from'react';

const ConfigComponent = ({ option1, option2 }) => {
  const config = useMemo(() => {
    return {
      key1: option1,
      key2: option2
    };
  }, [option1, option2]);

  // 使用 config 进行其他操作
  return <div>Config is set: {JSON.stringify(config)}</div>;
};

export default ConfigComponent;

在这个例子中，config 对象只有在 option1 或 option2 变化时才会重新生成，减少了不必要的对象创建。

使用 useCallback 缓存函数引用

  1. useCallback 基本原理：useCallback 是另一个 React Hook，用于缓存函数的引用。它的语法是 const memoizedCallback = useCallback(() => { /* callback body */ }, dependencies)。useCallback 返回一个 memoized（记忆化）的回调函数，只有当依赖数组中的值发生变化时，才会返回新的函数引用。 例如，在一个父组件向子组件传递回调函数的场景中：
import React, { useCallback } from'react';

const Child = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

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

export default Parent;

在这个例子中，handleClick 函数使用 useCallback 进行了缓存。如果 Parent 组件重新渲染，只要依赖数组（这里为空数组，表示没有依赖任何外部变量）没有变化，handleClick 的引用就不会改变。这对于子组件使用 React.memo 进行优化非常重要，因为 React.memo 依赖 props 的引用不变来避免重新渲染。如果没有使用 useCallback，每次 Parent 组件重新渲染，handleClick 都会是一个新的函数引用，即使函数体没有变化，这会导致 Child 组件不必要的重新渲染。 2. useCallback 的依赖管理：正确设置 useCallback 的依赖数组非常关键。如果依赖数组设置不当，可能会导致两种问题： - 依赖缺失：如果没有将所有在回调函数中使用的外部变量添加到依赖数组中，可能会导致回调函数使用到过期的变量值。例如：

import React, { useCallback, useState } from'react';

const ProblematicComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('Count is:', count);
  }, []); // 错误：缺少依赖 count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Log Count</button>
    </div>
  );
};

export default ProblematicComponent;

在这个例子中，handleClick 回调函数使用了 count 变量，但依赖数组中没有包含 count。因此，即使 count 发生变化，handleClick 的引用也不会改变，导致点击 Log Count 按钮时，打印的 count 值可能是过期的。 - 过度依赖：如果将不必要的变量添加到依赖数组中，会导致回调函数在这些变量变化时不必要地重新生成。例如：

import React, { useCallback, useState } from'react';

const OverDependencyComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('initial');
  const handleClick = useCallback(() => {
    console.log('Count is:', count);
  }, [count, text]); // 错误：text 不应该在依赖数组中

  return (
    <div>
      <p>Count: {count}</p>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Log Count</button>
    </div>
  );
};

export default OverDependencyComponent;

在这个例子中，handleClick 回调函数只依赖 count，但依赖数组中错误地包含了 text。这会导致每次 text 变化时，handleClick 都会重新生成，即使 text 与 handleClick 的逻辑无关。

拆分组件以控制重新渲染范围

  1. 组件拆分原则：通过合理拆分组件，可以将重新渲染的范围限制在更小的部分。一般来说，应该将可能频繁变化的数据和逻辑封装在一个独立的组件中，而将相对稳定的部分放在另一个组件中。 例如，假设有一个用户信息展示组件，其中用户名和用户地址可能会频繁更新，而用户的注册日期相对稳定：
import React, { useState } from'react';

const UserInfo = () => {
  const [name, setName] = useState('John');
  const [address, setAddress] = useState('123 Main St');
  const registrationDate = '2023 - 01 - 01';

  return (
    <div>
      <p>Name: {name}</p>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <p>Address: {address}</p>
      <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
      <p>Registration Date: {registrationDate}</p>
    </div>
  );
};

export default UserInfo;

在这个组件中，每次 name 或 address 变化，整个组件都会重新渲染，包括 registrationDate 的展示部分。可以通过拆分组件来优化：

import React, { useState } from'react';

const UserEditableInfo = ({ name, address, onNameChange, onAddressChange }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <input type="text" value={name} onChange={onNameChange} />
      <p>Address: {address}</p>
      <input type="text" value={address} onChange={onAddressChange} />
    </div>
  );
};

const UserStaticInfo = ({ registrationDate }) => {
  return <p>Registration Date: {registrationDate}</p>;
};

const UserInfo = () => {
  const [name, setName] = useState('John');
  const [address, setAddress] = useState('123 Main St');
  const registrationDate = '2023 - 01 - 01';

  return (
    <div>
      <UserEditableInfo
        name={name}
        address={address}
        onNameChange={(e) => setName(e.target.value)}
        onAddressChange={(e) => setAddress(e.target.value)}
      />
      <UserStaticInfo registrationDate={registrationDate} />
    </div>
  );
};

export default UserInfo;

在这个优化后的代码中，UserEditableInfo 组件负责处理 name 和 address 的变化和展示，UserStaticInfo 组件负责展示 registrationDate。当 name 或 address 变化时，只有 UserEditableInfo 组件会重新渲染，UserStaticInfo 组件不受影响。 2. 组件通信与重新渲染控制：在拆分组件后，需要注意组件之间的通信方式，以确保重新渲染得到有效控制。例如，通过 props 传递数据和回调函数时，要确保这些 props 的变化不会导致不必要的重新渲染。可以结合 React.memo、useMemo 和 useCallback 来优化组件之间的交互。例如，继续上面的例子，如果 UserEditableInfo 组件需要将用户信息传递给父组件进行保存：

import React, { useState } from'react';

const UserEditableInfo = React.memo(({ name, address, onNameChange, onAddressChange, onSave }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <input type="text" value={name} onChange={onNameChange} />
      <p>Address: {address}</p>
      <input type="text" value={address} onChange={onAddressChange} />
      <button onClick={() => onSave({ name, address })}>Save</button>
    </div>
  );
});

const UserStaticInfo = React.memo(({ registrationDate }) => {
  return <p>Registration Date: {registrationDate}</p>;
});

const UserInfo = () => {
  const [name, setName] = useState('John');
  const [address, setAddress] = useState('123 Main St');
  const registrationDate = '2023 - 01 - 01';

  const handleSave = useCallback((userData) => {
    // 模拟保存逻辑
    console.log('Saving user data:', userData);
  }, []);

  return (
    <div>
      <UserEditableInfo
        name={name}
        address={address}
        onNameChange={(e) => setName(e.target.value)}
        onAddressChange={(e) => setAddress(e.target.value)}
        onSave={handleSave}
      />
      <UserStaticInfo registrationDate={registrationDate} />
    </div>
  );
};

export default UserInfo;

在这个例子中，UserEditableInfo 组件通过 onSave prop 接收父组件传递的 handleSave 回调函数。由于 handleSave 使用 useCallback 进行了缓存，并且 UserEditableInfo 被 React.memo 包裹，只要 name、address、onNameChange、onAddressChange 和 onSave 的引用没有变化，UserEditableInfo 就不会重新渲染，有效地控制了重新渲染的范围。

使用 shouldComponentUpdate 优化类组件（遗留方式）

在 React 类组件中，可以通过 shouldComponentUpdate 生命周期方法来控制组件是否应该重新渲染。shouldComponentUpdate 接收 nextProps 和 nextState 作为参数，返回一个布尔值。如果返回 true，组件会重新渲染；如果返回 false，组件不会重新渲染。 例如：

import React, { Component } from'react';

class MyClassComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.value!== nextProps.value || this.state.count!== nextState.count;
  }

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Prop value: {this.props.value}</p>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}

export default MyClassComponent;

在这个例子中，shouldComponentUpdate 方法检查 props.value 和 state.count 是否发生变化。只有当其中一个发生变化时，组件才会重新渲染。

然而，随着 React Hooks 的广泛应用，函数组件逐渐成为主流，shouldComponentUpdate 的使用场景越来越少。函数组件可以通过 React.memo、useMemo 和 useCallback 等工具实现类似的优化，并且代码更加简洁和易于维护。但了解 shouldComponentUpdate 对于理解 React 重新渲染的控制机制仍然有帮助，尤其是在维护旧的类组件代码时。

其他优化技巧

  1. 避免在渲染函数中创建新对象或数组：在组件的渲染函数中创建新的对象或数组会导致每次渲染时都生成新的引用，这可能会导致依赖这些引用的子组件不必要的重新渲染。例如：
import React from'react';

const BadPracticeComponent = () => {
  const data = { key: 'value' };
  return <div>{JSON.stringify(data)}</div>;
};

export default BadPracticeComponent;

在这个例子中，每次 BadPracticeComponent 重新渲染，data 都会是一个新的对象，即使内容没有变化。可以通过在组件外部定义对象或使用 useMemo 来缓存对象：

import React, { useMemo } from'react';

const staticData = { key: 'value' };

const GoodPracticeComponent = () => {
  const data = useMemo(() => staticData, []);
  return <div>{JSON.stringify(data)}</div>;
};

export default GoodPracticeComponent;

在这个优化后的代码中，data 要么引用外部定义的 staticData，要么通过 useMemo 缓存，避免了不必要的对象创建和重新渲染。 2. 合理使用 context：虽然 context 是一种强大的跨组件共享数据的方式，但过度使用或不正确使用可能会导致不必要的重新渲染。因为当 context 值变化时，所有订阅该 context 的组件都会重新渲染。可以通过将 context 消费者组件拆分为更小的部分，并结合 React.memo 来限制重新渲染的范围。例如，假设有一个全局主题 context：

import React, { createContext, useContext } from'react';

const ThemeContext = createContext();

const BigComponent = () => {
  const theme = useContext(ThemeContext);
  return (
    <div>
      <p>Some content with theme: {theme}</p>
      <SmallComponent />
    </div>
  );
};

const SmallComponent = () => {
  const theme = useContext(ThemeContext);
  return <p>Small part with theme: {theme}</p>;
};

export { BigComponent, ThemeContext };

在这个例子中，如果 ThemeContext 的值变化，BigComponent 和 SmallComponent 都会重新渲染。可以优化为：

import React, { createContext, useContext } from'react';

const ThemeContext = createContext();

const BigComponent = () => {
  const theme = useContext(ThemeContext);
  return (
    <div>
      <p>Some content with theme: {theme}</p>
      <SmallComponent theme={theme} />
    </div>
  );
};

const SmallComponent = React.memo(({ theme }) => {
  return <p>Small part with theme: {theme}</p>;
});

export { BigComponent, ThemeContext };

在这个优化后的代码中，SmallComponent 通过 props 接收主题值，并使用 React.memo 进行优化。只有当 theme prop 变化时，SmallComponent 才会重新渲染，而不是每次 ThemeContext 变化都重新渲染。

总结

在 React 开发中，避免不必要的重新渲染是提升应用性能的关键。通过合理使用 React.memo、useMemo、useCallback 等工具，结合组件拆分、正确处理组件通信以及注意一些编码细节，可以有效地减少不必要的重新渲染，提高应用的响应速度和用户体验。同时，随着 React 技术的不断发展，持续关注新的优化技巧和最佳实践也是非常重要的。在实际项目中，需要根据具体的应用场景和需求，灵活运用这些技巧，确保 React 应用的高效运行。