你是否有如下想法,希望有个方法可以强制刷新组件的React-hooks

275 阅读1分钟

最近在从0-1阅读Ahooks源码,有兴趣的可以一起来。

你们在开发中是不是有这种需求,比如做了一些操作需要强制刷新组件,但是你又没有依赖的State,是不是很苦恼?

接下来的hooks就可以满足你的要求。

代码如下:

import { useCallback, useState } from 'react';

const useUpdate = () => {
  const [, setState] = useState({});

  // 使用usecallback缓存
  // 因为setState({}) 的对象和原来的state原来的对象引用地址是不同的所以肯定会刷新组件
  return useCallback(() => setState({}), []);
};

export default useUpdate;

使用如下:

export default () => {
  const update = useUpdate();

  return (
    <>
      <div>Time: {Date.now()}</div>
      <button type="button" onClick={update} style={{ marginTop: 8 }}>
        update
      </button>
    </>
  );
};