React如何阻断render刷新

使用 shouldComponentUpdate 生命周期方法

在类组件中，可以通过实现 shouldComponentUpdate 方法来控制组件是否需要重新渲染。该方法接收 nextProps 和 nextState 作为参数，返回一个布尔值决定是否更新组件。返回 false 可以阻止渲染。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 仅当特定 prop 或 state 变化时重新渲染
    return nextProps.someProp !== this.props.someProp;
  }

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

继承 PureComponent

对于类组件，直接继承 React.PureComponent 可以自动实现浅比较（shallow compare）的 shouldComponentUpdate 逻辑。它会比较当前和下一次的 props 与 state，仅在变化时触发渲染。

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

使用 React.memo 包裹函数组件

对于函数组件，可以使用 React.memo 高阶组件实现类似 PureComponent 的效果。默认会对 props 进行浅比较，也可以通过第二个参数自定义比较逻辑。

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

// 自定义比较逻辑
const MyComponent = React.memo(
  function MyComponent(props) {
    return <div>{props.someProp}</div>;
  },
  (prevProps, nextProps) => prevProps.someProp === nextProps.someProp
);

使用 useMemo 和 useCallback 优化渲染

在函数组件中，通过 useMemo 缓存计算结果或 useCallback 缓存函数引用，可以避免不必要的子组件渲染。

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

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

  return (
    <div>
      <ChildComponent value={memoizedValue} onClick={memoizedCallback} />
    </div>
  );
}

避免直接修改 state 或 props

直接修改 state 或 props 可能导致浅比较失效。应始终返回新的对象或数组。

// 错误：直接修改 state
this.state.items.push(newItem);
this.setState({ items: this.state.items });

// 正确：返回新数组
this.setState(prevState => ({
  items: [...prevState.items, newItem]
}));

使用不可变数据库

对于复杂状态管理，使用不可变数据库（如 Immutable.js 或 Immer）可以简化数据比较逻辑，避免深层嵌套数据的意外修改。

import { produce } from 'immer';

function reducer(state, action) {
  return produce(state, draft => {
    draft.some.deeply.nested.property = action.value;
  });
}