React如何阻断render刷新

使用 React.memo 进行组件记忆

React.memo 是一个高阶组件，用于对函数组件进行浅比较。当父组件重新渲染时，如果传递给子组件的 props 没有变化，React.memo 会阻止子组件重新渲染。

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

使用 shouldComponentUpdate 生命周期方法

在类组件中，可以通过 shouldComponentUpdate 方法手动控制组件是否需要重新渲染。返回 false 可以阻止渲染。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只有特定 prop 变化时才重新渲染
    return nextProps.value !== this.props.value;
  }

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

使用 PureComponent 类

PureComponent 实现了 shouldComponentUpdate 的浅比较逻辑，会自动对 props 和 state 进行浅比较，决定是否需要重新渲染。

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

使用 useMemo 和 useCallback 优化渲染

useMemo 可以缓存计算结果，useCallback 可以缓存函数引用，避免不必要的重新计算和渲染。

function ParentComponent() {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => computeExpensiveValue(count), [count]);

  const memoizedCallback = useCallback(() => {
    doSomething(count);
  }, [count]);

  return <ChildComponent value={memoizedValue} callback={memoizedCallback} />;
}

避免在渲染中创建新对象或函数

在渲染函数中创建新的对象或函数会导致子组件每次都接收到新的 props，从而触发不必要的重新渲染。

// 避免这样做
function ParentComponent() {
  return <ChildComponent style={{ color: 'red' }} />;
}

// 改为这样做
const styles = { color: 'red' };
function ParentComponent() {
  return <ChildComponent style={styles} />;
}

使用 React 的 key 属性优化列表渲染

为列表项提供稳定的 key 可以帮助 React 识别哪些项目发生了变化，减少不必要的重新渲染。

function ListComponent({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

使用 Context API 时进行优化

当使用 Context 时，可以通过拆分 Context 或使用 memo 来避免不必要的渲染。

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

const Toolbar = React.memo(function Toolbar() {
  return <ThemedButton />;
});