react hooks 实现forceupdate强制刷新

React Hooks是React 16.8的新特性，可以让我们在无需编写类组件的情况下，使用状态（state）、生命周期等React的特性。其中一个非常重要的Hooks是useState，我们可以使用它来管理组件的状态。

当我们使用useState来管理一个状态时，如果想要强制刷新这个状态，可以通过调用useState返回的第二个参数（即setState方法）来实现。但是当我们使用useState来管理的状态太多，或者需要强制刷新的状态并不是我们使用useState时定义的状态，这时候就需要使用React提供的另一个Hooks——useForceUpdate。

useForceUpdate是一个自定义Hooks，它并不是React自带的Hooks。我们可以在自己的代码中定义这个Hooks，具体实现如下：

import { useState } from "react";

function useForceUpdate() {
  const [value, setValue] = useState(0);
  return () => setValue(value => value + 1);
}

export default useForceUpdate;

在这段代码中，我们使用useState来定义了一个状态value，并返回了一个匿名的回调函数。这个回调函数的功能是在每次调用时，将value状态的值加1，然后强制刷新组件。

在使用时，我们可以通过useForceUpdate()来获取这个功能：

import useForceUpdate from "./useForceUpdate";

function Example() {
  const forceUpdate = useForceUpdate();

  function handleClick() {
    forceUpdate();
  }

  return (
    <div>
      <p>{Math.random()}</p>
      <button onClick={handleClick}>强制刷新</button>
    </div>
  );
}

在这段代码中，我们在Example组件中使用useForceUpdate获取了一个forceUpdate函数，并将它绑定到了一个button的onClick事件上。当用户点击这个按钮时，调用forceUpdate函数会触发组件的强制刷新。