🙋🏻‍♀️ 编编拎重点：最近 React 18 发布后，部分改动对我们使用 React Hooks 有一些影响。这篇文章是蚂蚁集团前端工程师尽龙对官方文档的翻译，好让大家清晰的认识到这个改动的背景和影响。

1. 译者前言

最近 React 18 发布后，部分改动对我们使用 React Hooks 有一些影响。这篇文章对官方的文档 Update to remove the "setState on unmounted component warning"^[1] 做了翻译，好让大家清晰的认识到这个改动的背景和影响。这是 React 18 对 Hooks 的影响系列第一篇，后续还会再整理其他有影响的改动，欢迎关注不迷路。

2. 翻译

2.1 背景

之前在已经卸载的组件中调用 setState时，会有一个警告，本次我们将这个警告移除了。警告内容如下：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

警告：不能在已经卸载的组件中更改 state。这是一个无用的操作，它表明你的项目中存在内存泄漏。要解决这个问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

不幸的是，这个警告经常被误解，并且会误导大家。

它原本是想保证如下示例能正常工作的：

useEffect(() => {
  function handleChange() {
     setState(store.getState())
  }
  store.subscribe(handleChange)
  return () => store.unsubscribe(handleChange)
}, [])

在这个例子中，如果你忘记了在 effect 清理函数中调用 unsubscribe，那肯定是有内存泄漏的。

2.2 为什么说这个警告会误导大家呢？

事实上，上面的场景并不常见。反而如下场景是更常见的：

async function handleSubmit() {
  setPending(true)
  await post('/someapi') // component might unmount while we're waiting
  setPending(false)
}

在上面的代码中，如果发送请求时，组件卸载了，会抛出警告。但是，在这种场景下，警告误导了大家。

这里其实没有内存泄漏：

• Promise 会很快完成执行，然后内存被垃圾回收机制回收
  
• 即使没有很快完成执行，这个警告也是没用的，因为垃圾回收也还是得等 Promise 执行完回收，你啥也不能做
  

一般，我们会通过如下代码来消除警告：

let isMountedRef = useRef(false)
useEffect(() => {
  isMountedRef.current = true
  return () => {
    isMountedRef.current = false
  }
}, [])
async function handleSubmit() {
  setPending(true)
  await post('/someapi')
  if (!isMountedRef.current) {
    setPending(false)
  }
}

实际上，这种写法是没用的，并没有解决所谓的“内存泄漏”，它仅仅只是抑制了警告。正如前面说的，这里其实是没有内存泄漏的。内存会随着 Promise 执行完而释放，并没有什么在无限执行。

2.3 上述抑制警告方案比不处理更糟糕

上述抑制警告的解决方案，现在非常非常普遍。但它其实没任何好处，反而比不处理更糟糕：

• 未来，React 会提供一个新能力，在组件卸载不可见时，我们会保存组件现在的 state，但仍会卸载组件。下次加载组件的时候，我们会用之前保存的 state 来渲染组件，以便恢复之前的页面。在组件卸载之后，setPending(false)不会被执行到，所以 pending会一直是 true，那下次恢复组件的时候，看起来是请求没有执行完成，会变的更糟糕。（译者注：关于这一块详细的行为和影响面，下一篇文章介绍）
  
• 假设用户点击一个按钮，发起一个网络请求，请求结束后更新 state。为了避免这个警告，有些人会将请求行为放到 useEffect 中，因为在 useEffect 中可以监听到组件卸载，以忽略后续的 state 更新，消除警告。这样代码变的非常不清晰，非常糟糕！就是因为这个错误的警告，会让大家写出更烂的代码。
  

2.4 移除警告

最终，我们决定移除这个警告。这个警告想解决的订阅问题，在日常代码中并不常见。大部分情况下，它反而会误导大家，为了避免告警写出更烂的代码。希望这个警告的移除，可以让你移除代码中的 isMounted。

3. 译者总结

在 ahooks 中的 useUnmountedRef^[2]、useSafeState^[3] 等都是为了解决这个警告而生的。同时我们在 ahooks 中必要的地方，为了避免这个告警，也会在组件卸载后，忽略后续的 setState。

目前来看，这些代码是多余的，后续 ahooks 会陆续优化相关场景，但不会太快。因为在 react 16、17 中这个告警仍然会有，会对新人造成不必要的困扰。我们会等 React 18 覆盖面比较广之后，再进行代码优化。

以后在代码中大家应该不需要再考虑这个告警了，不需要再使用 useUnmountedRef^[4]、useSafeState^[5] 等 Hooks 了。

参考资料

[1]

Update to remove the setState on unmounted component warning: https://github.com/reactwg/react-18/discussions/82

[2]

useUnmountedRef: https://ahooks.js.org/hooks/use-unmounted-ref

[3]

useSafeState: https://ahooks.js.org/hooks/use-safe-state

[4]

useUnmountedRef: https://ahooks.js.org/hooks/use-unmounted-ref

[5]

useSafeState: https://ahooks.js.org/hooks/use-safe-state