最近嘗試在 useEffect 使用 async 的時(shí)候會(huì)報(bào)錯(cuò)，因此，本篇文章就是想喝大家說(shuō)說(shuō)為什么？也解讀其中緣由。

　　具體代碼分析

　　執(zhí)行 mountEffect

　　當(dāng)頁(yè)面中使用 useEffect 的時(shí)候，會(huì)在初始化的時(shí)候執(zhí)行 mountEffect 如下：

　　useEffect: function(create, deps) {
　　currentHookNameInDev = "useEffect";
　　mountHookTypesDev();
　　checkDepsAreArrayDev(deps);
　　return mountEffect(create, deps);
　　},

　　執(zhí)行 mountEffectImpl

　　執(zhí)行 mountEffect 的時(shí)候執(zhí)行 mountEffectImpl 如下：　

　function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
　　var hook = mountWorkInProgressHook();
　　var nextDeps = deps === void 0 ? null : deps;
　　currentlyRenderingFiber$1.flags |= fiberFlags;
　　hook.memoizedState = pushEffect(HasEffect | hookFlags, create, void 0, nextDeps);
　　}

　　執(zhí)行 pushEffect

　　在 pushEffect 中會(huì)創(chuàng)建一個(gè) effect 節(jié)點(diǎn)，也要哦添加到當(dāng)前函數(shù)對(duì)應(yīng) fiber 的 updateQueue 上面，數(shù)據(jù)結(jié)構(gòu)是一個(gè)環(huán)鏈。

　　function pushEffect(tag, create, destroy, deps) {
　　var effect = {
　　tag,
　　create,
　　destroy,
　　deps,
　　next: null
　　};
　　var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
　　if (componentUpdateQueue === null) {
　　componentUpdateQueue = createFunctionComponentUpdateQueue();
　　currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
　　componentUpdateQueue.lastEffect = effect.next = effect;
　　} else {
　　var lastEffect = componentUpdateQueue.lastEffect;
　　if (lastEffect === null) {
　　componentUpdateQueue.lastEffect = effect.next = effect;
　　} else {
　　var firstEffect = lastEffect.next;
　　lastEffect.next = effect;
　　effect.next = firstEffect;
　　componentUpdateQueue.lastEffect = effect;
　　}
　　}
　　return effect;
　　}

　　進(jìn)入到 schedulePassiveEffects

　　直接忽略中間調(diào)度代碼內(nèi)容，進(jìn)入到 schedulePassiveEffects，這個(gè)函數(shù)作用是從函數(shù)組件對(duì)應(yīng)的 fiber 上獲取上面掛載的 effect，然后將 effect 和 fiber 堆到 pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount 這個(gè)兩個(gè)隊(duì)列中　

　function schedulePassiveEffects(finishedWork) {
　　var updateQueue = finishedWork.updateQueue;
　　var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
　　if (lastEffect !== null) {
　　var firstEffect = lastEffect.next;
　　var effect = firstEffect;
　　do {
　　var _effect = effect
　　, next = _effect.next
　　, tag = _effect.tag;
　　if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
　　//
　　enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
　　enqueuePendingPassiveHookEffectMount(finishedWork, effect);
　　}
　　effect = next;
　　} while (effect !== firstEffect);
　　}
　　}

　　推入卸載隊(duì)列

　　這里是推入的邏輯，只展示推入掛載隊(duì)列的方法，推入卸載隊(duì)列是一樣的

　　function enqueuePendingPassiveHookEffectMount(fiber, effect) {
　　pendingPassiveHookEffectsMount.push(effect, fiber);
　　if (!rootDoesHavePassiveEffects) {
　　rootDoesHavePassiveEffects = true;
　　scheduleCallback(NormalPriority$1, function() {
　　flushPassiveEffects();
　　return null;
　　});
　　}
　　}

　　invokePassiveEffectCreate 執(zhí)行

　　早一大推度之后會(huì)進(jìn)入 flushPassiveEffectsImpl ，函數(shù)太長(zhǎng)了，只貼出相關(guān)的部分，邏輯是循環(huán)掛載 effect 隊(duì)列中的每一個(gè) effect 傳入到 invokePassiveEffectCreate 執(zhí)行

　　// ...
　　var mountEffects = pendingPassiveHookEffectsMount;
　　pendingPassiveHookEffectsMount = [];
　　for (var _i = 0; _i < mountEffects.length; _i += 2) {
　　var _effect2 = mountEffects[_i];
　　var _fiber = mountEffects[_i + 1];
　　{
　　setCurrentFiber(_fiber);
　　{
　　invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);
　　}
　　if (hasCaughtError()) {
　　if (!(_fiber !== null)) {
　　{
　　throw Error("Should be working on an effect.");
　　}
　　}
　　var _error4 = clearCaughtError();
　　captureCommitPhaseError(_fiber, _error4);
　　}
　　resetCurrentFiber();
　　}
　　}
　　// ...

　　這個(gè)函數(shù)會(huì)獲取 create 并執(zhí)行，然后將執(zhí)行結(jié)果掛載到 destroy 上，這里的 create 就是 useEffect 中的第一個(gè)參數(shù)，從這里可以看出，如果有返回值，那么 destroy 就是第一個(gè)函數(shù)的返回值，沒(méi)有就是 undefined

　　function invokePassiveEffectCreate(effect) {
　　var create = effect.create;
　　effect.destroy = create();
　　}

　　卸載的時(shí)候會(huì)通過(guò)函數(shù)組件對(duì)應(yīng)的 fiber 獲取 effect 鏈表，然后遍歷鏈表，獲取環(huán)鏈上的每一個(gè)節(jié)點(diǎn)，如果 destroy 不是 undefined 就執(zhí)行，所以如果 useEffect 第一個(gè)參數(shù)傳入 async, 那么這里的 destroy 就是一個(gè) promise 對(duì)象，對(duì)象是不能執(zhí)行的，所以報(bào)錯(cuò)。

　　function commitHookEffectListUnmount(tag, finishedWork) {
　　var updateQueue = finishedWork.updateQueue;
　　var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
　　if (lastEffect !== null) {
　　var firstEffect = lastEffect.next;
　　var effect = firstEffect;
　　do {
　　if ((effect.tag & tag) === tag) {
　　// Unmount
　　var destroy = effect.destroy;
　　effect.destroy = undefined;
　　if (destroy !== undefined) {
　　destroy();
　　}
　　}
　　effect = effect.next;
　　} while (effect !== firstEffect);
　　}
　　}

　　知道解決方法，就好說(shuō)了，直接手寫(xiě)一個(gè)自定義 hook，包裹一下就可以處理這個(gè)問(wèn)題了，hook 實(shí)現(xiàn)如下。

　　hook 實(shí)現(xiàn)

　　import { useEffect } from 'react'
　　export default function useAsyncEffect<T, U extends any[]>(
　　method: () => Promise<T>,
　　deps: U
　　) {
　　useEffect(() => {
　　(async () => {
　　await method()
　　})()
　　}, deps)
　　}

　　使用

　　import React, { useState } from 'react'
　　import { useAsyncEffect } from './useAsyncEffect'
　　export default function Demo() {
　　const [count, setCount] = useState(0)
　　function fetchData(): Promise<number> {
　　return new Promise((resolve) => {
　　setTimeout(() => {
　　resolve(count + 1)
　　}, 2000)
　　})
　　}
　　useAsyncEffect(async () => {
　　const count = await fetchData()
　　setCount(count)
　　}, [fetchData])
　　return (
　　<div>{count}</div>
　　)
　　}

　　值得注意的是返回值永遠(yuǎn)是undefined，這就是留給大家開(kāi)動(dòng)腦筋解決。