为什么在 ReactJS 中使用 Hooks，onClick={forceUpdate} 可以工作？答案

【问题标题】：Why in ReactJS using Hooks, onClick={forceUpdate} can work?为什么在 ReactJS 中使用 Hooks，onClick={forceUpdate} 可以工作？
【发布时间】：2021-03-03 17:20:46
【问题描述】：

如果我们有

  const [, forceUpdate] = useState(0);

  function handleClick() {
    forceUpdate();
  }

  return (
    <div className="App">
      <div>{Math.random()}</div>
     
      <button onClick={handleClick}>click</button>

那么它不会进行强制更新。演示：https://codesandbox.io/s/beautiful-meadow-9icnh?file=/src/App.js

如果是的话

      <button onClick={forceUpdate}>click</button>

然后就可以了。演示：https://codesandbox.io/s/goofy-germain-n0trr?file=/src/App.js

这是什么原因？

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

那是因为您的 forceUpdate 正在使用隐式传递给它的 event(React 的合成事件) 对象并将其设置为状态。在其他情况下，不带参数执行forceUpdate 相当于传递undefined，并且它是一个原语不会导致为后续状态更新再次重新渲染。

将handleClick(..) 更改为以下将导致相同的结果：-

function handleClick(e) {
    forceUpdate(e);
  }

【讨论】：

啊，我忘了微妙的事件对象
@nonopolarity 如果你想要一个不需要参数的 forceUpdate，你可以使用这个：const [ , forceUpdate ] = useReducer(() => ({}), 0);
@Paul 每次都是一个新对象
是的，useReducer 版本每次调用都会构造一个新的空对象，而不需要提供一个新对象 (e)。您也可以使用计数器，即React FAQ suggests:const [ , forceUpdate] = useReducer(x => x + 1, 0);