聊聊 React 18 对 Hooks 的影响

发布时间：2025-11-05 13:07:46 来源：创站工坊 作者：IT科技类资讯

一、聊聊 译者前言

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

二、影响 翻译

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

Warning: Cant 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 清理函数中取消所有订阅和异步任务。

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

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

useEffect(() => {

function handleChange() {

setState(store.getState())

}

store.subscribe(handleChange)

return () => store.unsubscribe(handleChange)

}, [])

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

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

async function handleSubmit() {

setPending(true)

await post(/someapi) // component might unmount while were waiting

setPending(false)

}

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

这里其实没有内存泄漏：

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

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 执行完而释放，并没有什么在无限执行。

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

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

三、 译者总结

在 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。

相关文章