React中如何避免不必要的render？

八股文_React面试题 0 33

参考回答

在 React 中，避免不必要的 render 可以提高应用的性能，特别是在渲染大量组件或处理复杂 UI 时。React 提供了多个机制和方法来优化渲染，减少不必要的重新渲染。以下是一些常见的优化策略：

shouldComponentUpdate：使用 shouldComponentUpdate 方法来控制组件是否需要更新。
React.PureComponent：使用 PureComponent 来自动进行浅比较，避免不必要的渲染。
React.memo：对于函数组件，使用 React.memo 来避免无意义的重新渲染。
避免频繁的状态更新：避免不必要的 setState 调用。
避免匿名函数和内联函数：避免在渲染时创建匿名函数或内联函数。
分离渲染逻辑：合理拆分组件，确保每个组件只负责最小的 UI 部分。

详细讲解与拓展

1. `shouldComponentUpdate` 方法

shouldComponentUpdate 是类组件中的生命周期方法，它接收 nextProps 和 nextState 作为参数，并返回一个布尔值，表示组件是否需要更新。当返回 false 时，React 会跳过该组件的渲染过程，从而避免不必要的渲染。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只有当 `count` 改变时才重新渲染
    if (nextProps.count !== this.props.count) {
      return true;
    }
    return false;
  }

  render() {
    return <div>{this.props.count}</div>;
  }
}

shouldComponentUpdate 是优化性能的一个非常强大的工具，但需要谨慎使用，确保只在有必要时才跳过渲染。

2. `React.PureComponent`

React.PureComponent 是 React.Component 的子类，它自动实现了 shouldComponentUpdate，并通过浅比较（shallow comparison）来判断 props 和 state 是否发生了变化。如果没有变化，PureComponent 会阻止组件重新渲染。适用于 props 和 state 简单、变化不频繁的组件。

class MyPureComponent extends React.PureComponent {
  render() {
    return <div>{this.props.count}</div>;
  }
}

PureComponent 会对 props 和 state 进行浅层比较，这意味着它只比较对象或数组的引用地址，而不是深层比较。如果 props 或 state 中的某些属性发生了浅层变化，但你依然希望重新渲染组件，则需要手动管理比较逻辑。

3. `React.memo`（用于函数组件）

React.memo 是一个高阶组件，用于函数组件，它通过浅比较 props 来避免不必要的渲染。如果 props 没有变化，React 将跳过渲染过程。

const MyComponent = React.memo(function MyComponent({ count }) {
  return <div>{count}</div>;
});

React.memo 适用于纯函数组件，特别是当组件的渲染依赖于 props 并且 props 变化不频繁时。它的使用方法与 PureComponent 类似，但是是针对函数组件的。

4. 避免频繁的状态更新

频繁调用 setState 会导致组件多次重新渲染，从而影响性能。为了避免不必要的渲染，可以通过批量更新或确保 setState 只在必要时调用来优化性能。

例如，在多个 setState 调用中使用回调函数，可以将状态更新合并为一个渲染周期：

this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 2 }));
// React 会合并这两个更新，避免多次渲染

5. 避免匿名函数和内联函数

在 render 方法中创建匿名函数和内联函数会导致每次渲染时都会创建新的函数实例，这样会触发子组件的重新渲染。避免在 render 中定义内联函数，尤其是作为 props 传递给子组件时。

不推荐：

<MyComponent onClick={() => this.handleClick()} />

推荐：

handleClick = () => {
  // 处理点击事件
};

<MyComponent onClick={this.handleClick} />

通过这种方式，handleClick 函数不会在每次渲染时重新创建，从而避免不必要的重新渲染。

6. 分离渲染逻辑

将组件拆分成更小的子组件，以确保每个组件只渲染它自己关心的部分。这样可以减少渲染的层级和复杂度，避免大组件因某些子组件的变化而进行不必要的渲染。

// 将按钮和计数器分成两个独立的组件
class Counter extends React.Component {
  render() {
    return <div>{this.props.count}</div>;
  }
}

class Button extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>Increment</button>;
  }
}

class App extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <Counter count={this.state.count} />
        <Button onClick={this.increment} />
      </div>
    );
  }
}

在这个例子中，Counter 和 Button 是两个独立的组件，分别负责渲染它们自己的部分。通过拆分组件，每个组件都可以独立地更新，避免了大组件的重复渲染。

总结

避免不必要的渲染是 React 性能优化的重要部分。以下是一些常见的优化方式：
1. shouldComponentUpdate：自定义渲染逻辑，控制组件是否更新。
2. React.PureComponent：自动实现浅比较，避免不必要的渲染。
3. React.memo：对于函数组件，使用 React.memo 避免无意义的渲染。
4. 避免频繁的状态更新：确保状态更新仅在必要时触发，合并多个状态更新。
5. 避免匿名函数和内联函数：防止每次渲染时创建新的函数实例。
6. 分离渲染逻辑：拆分组件，减少不必要的渲染层级。

通过这些策略，开发者可以有效地减少不必要的渲染，提高 React 应用的性能。

参考回答

详细讲解与拓展

1. shouldComponentUpdate 方法

2. React.PureComponent

3. React.memo（用于函数组件）