在class组件中强制更新

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。

  1. import React, { component } from "react"
  2. // ...
  3. component.forceUpdate(callback)

https://zh-hans.reactjs.org/docs/react-component.html#forceupdate

在hooks组件中

如果前后两次的值相同，useState 和 useReducer Hook 都会放弃更新。原地修改 state 并调用 setState 不会引起重新渲染。
通常，你不应该在 React 中修改本地 state。然而，作为一条出路，你可以用一个增长的计数器来在 state 没变的时候依然强制一次重新渲染：

import { useReducer } from "react";
import "./App.css";

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

  function handleClick() {
    forceUpdate();
  }

  console.log("render");

  return (
    <div className="App">
      <button onClick={handleClick}>forceUpdate</button>
    </div>
  );
}

export default App;

https://zh-hans.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate