这可以使用useState或useReducer，因为在内部useState使用useReducer：

const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);

forceUpdate不打算在正常情况下使用，仅在测试或其他未解决的情况下使用。这种情况可以以更传统的方式解决。

setCount是使用不当的例子forceUpdate，setState是异步的性能，而且不应该被强迫只是因为状态更新没有正确执行是同步的。如果状态依赖于先前设置的状态，则应使用更新程序功能完成，

如果您需要根据之前的状态设置状态，请阅读下面的更新程序参数。

<...>

updater 函数接收到的 state 和 props 都保证是最新的。更新器的输出与状态浅合并。

setCount 可能不是一个说明性的例子，因为它的目的不明确，但更新程序功能就是这种情况：

setCount(){
  this.setState(({count}) => ({ count: count + 1 }));
  this.setState(({count2}) => ({ count2: count + 1 }));
  this.setState(({count}) => ({ count2: count + 1 }));
}

这被 1:1 转换为钩子，除了用作回调的函数最好被记住：

   const [state, setState] = useState({ count: 0, count2: 100 });

   const setCount = useCallback(() => {
     setState(({count}) => ({ count: count + 1 }));
     setState(({count2}) => ({ count2: count + 1 }));
     setState(({count}) => ({ count2: count + 1 }));
   }, []);

通常，您可以使用任何想要触发更新的状态处理方法。

使用typescript

代码沙盒示例

使用状态

const forceUpdate: () => void = React.useState()[1].bind(null, {})  // see NOTE below

使用减速机

const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void

作为自定义钩子

只需像这样包装您喜欢的任何方法

function useForceUpdate(): () => void {
  return React.useReducer(() => ({}), {})[1] as () => void // <- paste here
}

这是如何工作的？

“触发更新”的意思是告诉 React 引擎某些值已经改变，它应该重新渲染你的组件。

[, setState]fromuseState()需要一个参数。我们通过绑定一个新对象来摆脱它{}。
() => ({})inuseReducer是一个虚拟的reducer，每次分派动作时都会返回一个新对象。
{} (fresh object)是必需的，以便它通过更改状态中的引用来触发更新。

PS：useState只是在useReducer内部包装。来源

注意：将 .bind 与 useState 一起使用会导致渲染之间的函数引用发生变化。可以将它包装在 useCallback 中，正如这里已经解释的那样，但它不会是一个性感的 one-liner™。Reducer 版本已经在渲染之间保持引用相等。如果你想在 props 中传递 forceUpdate 函数，这很重要。

纯JS

const forceUpdate = React.useState()[1].bind(null, {})  // see NOTE above
const forceUpdate = React.useReducer(() => ({}))[1]

React Hooks FAQ官方解决方案forceUpdate：

const [_, forceUpdate] = useReducer((x) => x + 1, 0);
// usage
<button onClick={forceUpdate}>Force update</button>

工作示例

const App = () => {
  const [_, forceUpdate] = useReducer((x) => x + 1, 0);

  return (
    <div>
      <button onClick={forceUpdate}>Force update</button>
      <p>Forced update {_} times</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js" integrity="sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js" integrity="sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4/R7x4GqCvZ4=" crossorigin="anonymous"></script>
<script>var useReducer = React.useReducer</script>
<div id="root"></div>

正如其他人提到的，useState有效 - 这是mobx-react-lite实现更新的方式 - 你可以做类似的事情。

定义一个新的钩子，useForceUpdate-

import { useState, useCallback } from 'react'

export function useForceUpdate() {
  const [, setTick] = useState(0);
  const update = useCallback(() => {
    setTick(tick => tick + 1);
  }, [])
  return update;
}

并在组件中使用它 -

const forceUpdate = useForceUpdate();
if (...) {
  forceUpdate(); // force re-render
}

见https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts和https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver .ts

替代@MinhKha 的回答：

它可以更清洁useReducer：

const [, forceUpdate] = useReducer(x => x + 1, 0);

用法： forceUpdate()- 没有参数的清洁器