很久很久以前，我們?cè)陬愔惺褂昧?React，還記得嗎？

當(dāng)時(shí)，我們有了生命周期方法的概念，即接受在特定時(shí)刻執(zhí)行的回調(diào)的類上的方法。三巨頭：裝載時(shí)、更新時(shí)和卸載時(shí)。

古老但黃金的課程

這很重要，在類組件上，返回的 JSX 是在 render 方法上生成的，狀態(tài)附加到組件的 this 上，并且應(yīng)用程序開(kāi)發(fā)人員需要一種方法來(lái)知道在某些時(shí)刻執(zhí)行操作。我們對(duì)組件生命周期的時(shí)間有了概念：

• componentDidMount 是組件首次渲染并向 DOM 添加元素的時(shí)刻，也是開(kāi)始連接和 API 請(qǐng)求等副作用的時(shí)刻。
• shouldComponentUpdate 允許您手動(dòng)設(shè)置邏輯來(lái)比較下一個(gè) props 和狀態(tài)，并返回一個(gè)布爾值來(lái)定義是否可以跳過(guò)重新渲染。
• componentDidUpdate 是狀態(tài)或 props 更改的時(shí)刻，再次調(diào)用 render 方法并對(duì)身份差異進(jìn)行協(xié)調(diào)更改并應(yīng)用于 DOM，有助于將狀態(tài)與新 props 同步并執(zhí)行邏輯操作。
• componentWillUnmount 是 React 將從 DOM 中刪除元素的時(shí)候，是清理內(nèi)容和避免內(nèi)存泄漏的好地方。

當(dāng)然，您有一個(gè)重要的 API，例如forceUpdate，如果您使用的外部數(shù)據(jù)無(wú)法與 React 狀態(tài)更新連接，它允許您手動(dòng)觸發(fā)重新渲染。

在概念層面上，我們有一種更直接的方式來(lái)執(zhí)行應(yīng)用程序的流程。生命周期方法遵循 DOM 元素的類似生命周期，您可以自己執(zhí)行 memo 和 forceUpdates，同步狀態(tài)是執(zhí)行邏輯的默認(rèn)方式。

這種直接性被認(rèn)為是簡(jiǎn)單的，與反應(yīng)式模型相比，學(xué)習(xí)這些概念更容易。但后來(lái)，Hooks 出現(xiàn)并改變了一切。

未命名的反應(yīng)性

過(guò)渡令人困惑。首先，為了讓開(kāi)發(fā)變得簡(jiǎn)單，并在某種程度上維護(hù)開(kāi)發(fā)人員所擁有的 React 模型的概念愿景，許多交流試圖展示 hooks 模型的相似之處。為了擁有 3 個(gè)主要的生命周期方法，他們展示了 useEffect 的解決方法。

// componentDidMount
 useEffect(() => {
    // code...

    // componentWillUnmount:
    return function cleanup() {
      // code...
    };
  }, []);

// componentDidUpdate
 useEffect(() => {
    // code...

  }, [dependencyState, dependencyProp]);

所以，大多數(shù)用 hooks 編寫的新 React 代碼都遵循這個(gè)想法，開(kāi)始同步狀態(tài)是一個(gè)自然的過(guò)程。為了保持生命周期方法的相同理念，這是調(diào)用 setState 并觸發(fā)重新渲染過(guò)程的地方。

有什么問(wèn)題嗎？

同步狀態(tài)成為問(wèn)題，useEffect 的錯(cuò)誤使用成為問(wèn)題，雙重重新渲染成為問(wèn)題，太多重新渲染成為問(wèn)題，性能成為問(wèn)題。

React 的這一步有點(diǎn)令人困惑，至少對(duì)我來(lái)說(shuō)是這樣。因?yàn)?，轉(zhuǎn)向鉤子就是轉(zhuǎn)向反應(yīng)式模型，即使它是一個(gè)粗粒度的模型。但傳達(dá)的信息是，沒(méi)有什么大的變化。沒(méi)有關(guān)于反應(yīng)性概念和理論的內(nèi)容，即使使用 React 多年，我也只是閱讀 Ryan Carniato 關(guān)于反應(yīng)性和固體的博客文章才開(kāi)始真正理解反應(yīng)性。

即使知道 useEffect 有一個(gè)誤用，我真的不明白為什么，而且缺乏關(guān)于反應(yīng)性的概念理論使得鉤子很容易犯錯(cuò)誤。 useEffect 成為最令人討厭的 hook，被一些人稱為“useFootgun”。關(guān)鍵是，React 中存在概念上的混亂，表現(xiàn)為我們今天看到的 useEffect 的所有問(wèn)題。

useEffect問(wèn)題不是問(wèn)題的原因，而是問(wèn)題的結(jié)果。

鉤子的生命周期怎么樣

所以，這就是事情。反應(yīng)性的概念中沒(méi)有生命周期。

你發(fā)生了變化，你對(duì)它做出反應(yīng)，產(chǎn)生副作用。效果是結(jié)果，而不是原因。沒(méi)有狀態(tài)同步，也沒(méi)有掛載和卸載的概念。

無(wú)論是卸載前的第一個(gè)、第十個(gè)還是最后一個(gè)渲染都沒(méi)有關(guān)系，而且鉤子不關(guān)心它，順便說(shuō)一句，甚至 useEffect。

嘗試一下：

// componentDidMount
 useEffect(() => {
    // code...

    // componentWillUnmount:
    return function cleanup() {
      // code...
    };
  }, []);

// componentDidUpdate
 useEffect(() => {
    // code...

  }, [dependencyState, dependencyProp]);

您將在控制臺(tái)上看到每次狀態(tài)更新時(shí)都會(huì)執(zhí)行這兩個(gè)函數(shù)。首先是清理，然后是效果回調(diào)。如果您使用帶有某些狀態(tài)或?qū)傩缘?useEffect 來(lái)進(jìn)行訂閱，則每次依賴項(xiàng)發(fā)生更改時(shí)，都會(huì)調(diào)用清理函數(shù)，然后調(diào)用新的回調(diào)，再次進(jìn)行訂閱，但使用新值。

您應(yīng)該將應(yīng)用程序代碼視為簡(jiǎn)化的 React 模型：

function EffectExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('effect', count);

    return () => {
      console.log('clean up', count);
    }
  }, [count]);

  return (
    <button onClick={() => setCount((state) => state + 1)}>
      {count}
    </button>
  )
}

如果您有這樣的組件：

UI = fn(state)

當(dāng)您單擊按鈕并將計(jì)數(shù)加 1 時(shí)，您真正擁有的概念上是這樣的：

function Example() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((state) => state + 1)}>
      {count}
    </button>
  )
}

每次點(diǎn)擊都會(huì)再次調(diào)用 fn，并使用新的狀態(tài)，生成新版本的 UI。狀態(tài)應(yīng)該通過(guò)用戶的操作或通過(guò)異步派生生成的異步值來(lái)更改。

這樣你就可以保持干凈的想法：

• 狀態(tài)轉(zhuǎn)換進(jìn)行新的 fn 調(diào)用
• 在新?tīng)顟B(tài)下，您將獲得 UI 描述
• 如果不同，請(qǐng)更新屏幕。

一個(gè)干凈且一致的模型。

渲染器需要關(guān)心在屏幕上添加、更新和刪除元素。在組件級(jí)別，重要的是：

• 如果狀態(tài)改變
• 應(yīng)用程序是否可以處理用戶操作
• JSX 中返回的結(jié)構(gòu)。

Hooks 及其響應(yīng)式模型使 React 與瀏覽器解耦，使應(yīng)用程序代碼不必關(guān)心您處于屏幕渲染過(guò)程的哪個(gè)時(shí)刻。您不再?gòu)?qiáng)制更新，甚至不再按照自己的規(guī)則處理備忘錄，這對(duì)于應(yīng)用開(kāi)發(fā)人員來(lái)說(shuō)不太直接，但在模型方面更直接。

每次重新渲染都會(huì)生成一個(gè)結(jié)構(gòu)，React 負(fù)責(zé)剩下的事情。

以上是帶鉤子的 React 中不存在生命周期的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！