避免因使用setState渲染整个页面而导致的输入卡顿

前端

2024-01-16 14:46:32

避免 setState 导致页面重新渲染的指南

在 React 应用程序中，使用 setState 更新组件状态时，React 会触发组件重新渲染，这可能会导致页面卡顿和性能下降。了解导致页面重新渲染的原因并采取预防措施至关重要。

为什么 setState 会导致页面重新渲染？

React 使用「虚拟 DOM」的概念，当组件状态变化时，React 会比较虚拟 DOM 和实际 DOM，并仅更新需要更新的元素。然而，如果更新的是整个页面的状态而不是组件自身的状态，则会触发整个页面的重新渲染，这可能会降低性能。

如何避免 setState 导致页面重新渲染

1. 使用局部状态

将组件状态划分为局部状态和全局状态。局部状态仅与当前组件相关，而全局状态则与整个页面相关。在组件内部使用 setState 更新局部状态，避免更新全局状态。这样可以减少重新渲染的元素数量，从而提高性能。

代码示例：

const MyComponent = () => {
  const [localState, setLocalState] = useState({ value: 0 });
  // ...

  return (
    <div>
      <input type="number" value={localState.value} onChange={(e) => setLocalState({ value: e.target.value })} />
    </div>
  );
};

2. 使用 useReducer

useReducer 可以将状态更新逻辑与组件渲染过程分离，从而避免状态更新时触发组件重新渲染。它提供更细粒度的状态更新控制，防止不必要的重新渲染。

代码示例：

const MyComponent = () => {
  const reducer = (state, action) => {
    switch (action.type) {
      case 'increment':
        return { value: state.value + 1 };
      case 'decrement':
        return { value: state.value - 1 };
      default:
        return state;
    }
  };
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <p>Value: {state.value}</p>
    </div>
  );
};

3. 使用 memoization

memoization 是缓存机制，可以将组件渲染结果缓存起来。当组件输入未变化时，直接返回缓存的渲染结果，避免不必要的重新渲染。

代码示例：

import React, { memo } from 'react';

const MyComponent = memo((props) => {
  // ...

  return (
    <div>
      {/* 组件渲染内容 */}
    </div>
  );
});

4. 使用 shouldComponentUpdate

在组件中实现 shouldComponentUpdate 方法，它可以在组件状态变化时决定是否重新渲染组件。如果状态没有发生实质性变化，返回 false，避免重新渲染。

代码示例：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较新旧状态，判断是否需要重新渲染
    if (this.props.value === nextProps.value && this.state.value === nextState.value) {
      return false;
    }

    return true;
  }

  render() {
    // ...

    return (
      <div>
        {/* 组件渲染内容 */}
      </div>
    );
  }
}