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

Question

如果我们有

  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

这是什么原因？

Answer 1

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

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

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

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

Why in ReactJS using Hooks, onClick={forceUpdate} can work?

reactjs

react-hooks

use-state