使用当前道具对 useEffect 清理进行反应

Question

当组件被卸载但可以访问当前道具时，我遇到了清理 useEffect 的需要。就像 componentWillUnmount 可以通过获取 this.props.whatever 来做

这是一个小例子：单击“设置计数”按钮 5 次，然后查看您的控制台。您将在组件 B 的 console.log 中看到 0，无论“计数”为 5 https://codesandbox.io/embed/vibrant-feather-v9f6o

如何实现在 useEffect 清理函数中获取当前道具的行为（在我的例子中为 5）？

更新：将 计数传递给 useEffect 的依赖项将无济于事，因为：

1. 每次传递给 props 的新计数都会调用清理
2. 最后一个值将是 4 而不是所需的 5

Answer 1

由于您传递了空数组作为 的依赖项列表useEffect，因此您的效果函数仅在第一次注册。此时，count 的值为 0。这就是附加到 useEffect 内部函数的 count 的值。如果您想获取最新的计数值，则需要在每个渲染上运行 useEffect。删除空数组依赖。

useEffect(() => {
  return () => console.log(count);
})

或使用 count 作为依赖项。这样，每次计数发生变化时，都会重新创建效果函数，并且还会创建一个可以访问最新计数值的新清理函数。

useEffect(() => {
  return () => console.log(count);
}, [count])