reactjs - 使用 React 钩子(Hook)强制更新

Question

是否有可以与 React 钩子(Hook)一起使用的 forceUpdate 替代品？

我的用例是组件实例之间的共享状态。本质上，每个实例只是对单个全局状态的 View 。使用 ES6 类，代码在 componentDidMount 中注册/注销具有状态的组件，状态在其更改时调用 forceUpdate，然后渲染方法直接查询全局状态。

我考虑将其切换为钩子(Hook)。最初 useEffect 似乎是该问题的完美匹配。但后来我意识到我无法访问 forceUpdate。

我考虑了一种解决方法，它调用 useState 钩子(Hook)来添加一个虚拟计数器，然后从效果钩子(Hook)中更新计数器，但感觉就像一个 hack。我还可以将所有相关的共享状态参数复制到效果 Hook 中的组件状态中，然后从状态中引用这些参数。但它本质上复制了状态，因为当我目前可以直接在渲染方法中使用这些行时，使用复制状态的行来膨胀代码并没有好处。

更新:这里是 codesandbox.io与使用类组件的共享状态示例链接，我想在不复制状态或使用虚假状态更新的情况下将其转换为 Hook 。

Answer 1

您可以使用另一种技巧来执行 forceUpdate。这里是:



从 react 文档:

Both useState and useReducer Hooks bail out of updates if the next value is the same as the previous one. Mutating state in place and calling setState will not cause a re-render. Normally, you shouldn’t mutate local state in React. However, as an escape hatch, you can use an incrementing counter to force a re-render even if the state has not changed.