useMemo 和 useEffect 回调是仅在 React 组件诞生和死亡时运行代码的好地方吗？

Question

我想挂钩 React 组件的两个生命周期事件。何时生，何时死。当它诞生时，我想从 URL 或本地存储加载一些数据，并且无论组件的内部状态改变多少次，这些数据都不应该改变。

在组件生命周期结束时，当它被处置时，我想在本地存储中存储一些数据。

我想到使用 useMemo() 来处理出生事件。我考虑在死亡事件的空 useEffect 中使用回调。

我选择正确了吗？

附注我希望我正在创建一个通用列表组件。我想从 URL 或本地存储加载一次初始过滤器。当情况发生变化时，我想更新 URL。当列表关闭时，我想将最新的过滤状态存储在本地存储中。

Answer 1

您正在寻找具有空依赖项数组的

useEffect

。回调函数的主要代码仅在组件创建后运行一次。如果该回调返回一个函数，则该函数（又名“清理回调” - 因为它通常用于清理绑定）将在组件被销毁之前运行：

React.useEffect(() => {
  // this code runs just after the component was created
  return () => {
     // this code runs just before the component is destroyed
  }
}, [])

useEffect()的 React 文档。