实现 useUpdate 强制组件重新渲染

问题

实现一个 useUpdate Hook，调用时强制 React 组件重新渲染。

解答

利用 useReducer 触发状态更新来实现强制重新渲染：

import { useReducer } from 'react';

const updateReducer = (num: number): number => (num + 1) % 1_000_000;

export default function useUpdate(): () => void {
  const [, update] = useReducer(updateReducer, 0);

  return update;
}

使用示例：

function MyComponent() {
  const update = useUpdate();

  return (
    <button onClick={update}>
      强制重新渲染
    </button>
  );
}

关键点

• 使用 useReducer 而非 useState，因为 reducer 函数每次都返回新值，确保触发更新
• 通过递增计数器并取模 1,000,000 避免数字无限增长
• 忽略 useReducer 返回的状态值，只使用 dispatch 函数
• 每次调用 update() 都会触发组件重新渲染