函数组件模拟forceupdate

538 阅读1分钟

使用useState模拟forceUpdate

function App() {
  console.log('render');
  const [, setState] = useState(0);
  return (
    <div>
      <button
        onClick={() => {
          setState((prev) => prev + 1);
        }}
      >
        你好哈哈
      </button>
    </div>
  );
}

使用useReducer模拟

function App() {
  console.log('render');
  const [, dispatch] = useReducer((x) => x + 1, 0);
  return (
    <div>
      <button
        onClick={() => {
          dispatch();
        }}
      >
        你好哈哈
      </button>
    </div>
  );
}

将forceupdate抽离出一个单独的hook


function App() {
  console.log('render');
  const forcUpdate = useForceUpdate();
  return (
    <div>
      <button
        onClick={() => {
          forcUpdate();
        }}
      >
        你好哈哈
      </button>
    </div>
  );
}

function useForceUpdate() {
  const [, forceupdate] = useReducer((x) => x + 1, 0);
  const forceUpdateFun = useCallback(() => {
    forceupdate();
  }, []);

  return forceUpdateFun;
}