javascript - 我们如何使用 React Hooks 实现 componentWillUnmount？

Question

方法 componentWillUnmount() 在组件被卸载和销毁之前立即被调用。如果我们使用带有空数组 ([]) 作为第二个参数的 useEffect 并将我们的函数放在 return 语句中，它将在组件卸载后执行，甚至在安装另一个组件后执行。据我了解，这样做是出于性能原因。为了不延迟渲染。

所以问题是 - 我们如何在卸载组件之前使用钩子(Hook)调用一些函数？

我想做的是一个应用程序，它可以在用户键入时保存他的输入(无需提交表单)。我使用 setInterval 每 N 秒保存一次更新的文本。我需要在卸载组件之前强制保存更新。我不想在导航之前通过 react 路由器使用提示。这是一个电子申请。我很感激任何有关如何实现此类功能的想法或建议。

更新

不幸的是，Effects with Cleanup让浏览器绘制后运行。可以在此处找到更多详细信息:So What About Cleanup? .它基本上意味着清除是在卸载组件后运行的，它与在 componentWillUnmount() 中执行代码不同。如果我将 console.log 语句放在清理代码和另一个组件中，我可以清楚地看到调用顺序。问题是我们是否可以在使用钩子(Hook)卸载组件之前执行一些代码。

更新2

如我所见，我应该更好地描述我的用例。让我们想象一个理论上的应用程序，它将其数据保存在 Redux 存储中。我们有两个具有某些形式的组件。为简单起见，我们没有任何后端或任何异步逻辑。我们只使用 Redux 存储作为数据存储。

我们不想在每次击键时更新 Redux 存储。因此，我们将实际值保存在本地组件的状态中，当组件安装时，我们使用商店中的值对其进行初始化。我们还创建了一个将 setInterval 设置为 1s 的效果。

我们有以下流程。用户键入内容。更新存储在本地组件状态中，直到我们的 setInterval 回调被调用。回调只是将数据放入商店(调度操作)。我们将回调放在 useEffect 返回语句中，以在组件卸载时强制保存到存储，因为我们希望在这种情况下尽快保存数据以进行存储。

当用户在第一个组件中键入内容并立即转到第二个组件(快于 1 秒)时，问题就来了。由于我们的第一个组件中的清理将在重新渲染后调用，因此在安装第二个组件之前我们的商店不会更新。正因为如此，第二个组件将获取过时的值到其本地状态。

如果我们将回调放在 componentWillUnmount() 中，它将在卸载之前调用，并且存储将在下一个组件安装之前更新。那么我们可以使用钩子(Hook)来实现吗？

Answer 1

componentWillUnmount 可以通过在 useEffect Hook 中返回一个函数来模拟。返回的函数将在每次重新渲染组件之前调用。严格来说，这是同一件事，但您应该能够使用它来模拟您想要的任何行为。

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
})

更新

上面的代码会在每次重新渲染时运行。但是，仅模拟安装和卸载时的行为(即 componentDidMount 和 componentWillUnmount)。 useEffect 需要一个 second argument这需要是一个空数组。

useEffect(() => {
  const unsubscribe = api.createSubscription()
  return () => unsubscribe()
}, [])

看同一个问题更详细的解释here .