建站
咨詢
售后
建站咨詢
新聞中心
一、 譯者前言
最近 React 18 發(fā)布后，部分改動(dòng)對我們使用 React Hooks 有一些影響。這篇文章對官方的文檔 Update to remove the "setState on unmounted component warning"[1] 做了翻譯，好讓大家清晰的認(rèn)識(shí)到這個(gè)改動(dòng)的背景和影響。這是 React 18 對 Hooks 的影響系列第一篇，后面我還會(huì)整理其它有影響的改動(dòng)。
二、 翻譯
1、 背景
之前在已經(jīng)卸載的組件中調(diào)用 setState時(shí)，會(huì)有一個(gè)警告，本次我們將這個(gè)警告移除了。警告內(nèi)容如下：
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。
警告：不能在已經(jīng)卸載的組件中更改 state。這是一個(gè)無用的操作，它表明你的項(xiàng)目中存在內(nèi)存泄漏。要解決這個(gè)問題，請?jiān)?useEffect 清理函數(shù)中取消所有訂閱和異步任務(wù)。
不幸的是，這個(gè)警告經(jīng)常被誤解，并且會(huì)誤導(dǎo)大家。
它原本是想保證如下示例能正常工作的：
useEffect(() => {
function handleChange() {
setState(store.getState())
}
store.subscribe(handleChange)
return () => store.unsubscribe(handleChange)
}, [])
在這個(gè)例子中，如果你忘記了在 effect 清理函數(shù)中調(diào)用 unsubscribe，那肯定是有內(nèi)存泄漏的。
2、 為什么說這個(gè)警告會(huì)誤導(dǎo)大家呢?
事實(shí)上，上面的場景并不常見。反而如下場景是更常見的：
async function handleSubmit() {
setPending(true)
await post('/someapi') // component might unmount while we're waiting
setPending(false)
}
在上面的代碼中，如果發(fā)送請求時(shí)，組件卸載了，會(huì)拋出警告。但是，在這種場景下，警告誤導(dǎo)了大家。
這里其實(shí)沒有內(nèi)存泄漏：
- Promise 會(huì)很快完成執(zhí)行，然后內(nèi)存被垃圾回收機(jī)制回收。
- 即使沒有很快完成執(zhí)行，這個(gè)警告也是沒用的，因?yàn)槔厥找策€是得等 Promise 執(zhí)行完回收，你啥也不能做。
一般，我們會(huì)通過如下代碼來消除警告：
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)
}
}
實(shí)際上，這種寫法是沒用的，并沒有解決所謂的“內(nèi)存泄漏”，它僅僅只是抑制了警告。正如前面說的，這里其實(shí)是沒有內(nèi)存泄漏的。內(nèi)存會(huì)隨著 Promise 執(zhí)行完而釋放，并沒有什么在無限執(zhí)行。
3、 上述抑制警告方案比不處理更糟糕
上述抑制警告的解決方案，現(xiàn)在非常非常普遍。但它其實(shí)沒任何好處，反而比不處理更糟糕：
- 未來，React 會(huì)提供一個(gè)新能力，在組件卸載不可見時(shí)，我們會(huì)保存組件現(xiàn)在的 state，但仍會(huì)卸載組件。下次加載組件的時(shí)候，我們會(huì)用之前保存的 state 來渲染組件，以便恢復(fù)之前的頁面。在組件卸載之后，setPending(false)不會(huì)被執(zhí)行到，所以 pending會(huì)一直是 true，那下次恢復(fù)組件的時(shí)候，看起來是請求沒有執(zhí)行完成，會(huì)變的更糟糕。(譯者注：關(guān)于這一塊詳細(xì)的行為和影響面，下一篇文章介紹)。
- 假設(shè)用戶點(diǎn)擊一個(gè)按鈕，發(fā)起一個(gè)網(wǎng)絡(luò)請求，請求結(jié)束后更新 state。為了避免這個(gè)警告，有些人會(huì)將請求行為放到 useEffect 中，因?yàn)樵?useEffect 中可以監(jiān)聽到組件卸載，以忽略后續(xù)的 state 更新，消除警告。這樣代碼變的非常不清晰，非常糟糕!就是因?yàn)檫@個(gè)錯(cuò)誤的警告，會(huì)讓大家寫出更爛的代碼。
4、 移除警告
最終，我們決定移除這個(gè)警告。這個(gè)警告想解決的訂閱問題，在日常代碼中并不常見。大部分情況下，它反而會(huì)誤導(dǎo)大家，為了避免告警寫出更爛的代碼。希望這個(gè)警告的移除，可以讓你移除代碼中的 isMounted。
三、 譯者總結(jié)
在 ahooks 中的 useUnmountedRef[2]、useSafeState[3] 等都是為了解決這個(gè)警告而生的。同時(shí)我們在 ahooks 中必要的地方，為了避免這個(gè)告警，也會(huì)在組件卸載后，忽略后續(xù)的 setState。
目前來看，這些代碼是多余的，后續(xù) ahooks 會(huì)陸續(xù)優(yōu)化相關(guān)場景，但不會(huì)太快。因?yàn)樵?react 16、17 中這個(gè)告警仍然會(huì)有，會(huì)對新人造成不必要的困擾。我們會(huì)等 React 18 覆蓋面比較廣之后，再進(jìn)行代碼優(yōu)化。
以后在代碼中大家應(yīng)該不需要再考慮這個(gè)告警了，不需要再使用 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。
當(dāng)前名稱：聊聊React18對Hooks的影響
標(biāo)題鏈接：http://www.5511xx.com/article/copiphp.html
