很久很久以前，我們在類別中使用了 React，還記得嗎？

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

古老但黃金的課程

這很重要，在類別元件上，傳回的 JSX 是在 render 方法上產(chǎn)生的，狀態(tài)附加到元件的 this 上，並且應(yīng)用程式開發(fā)人員需要一種方法來知道在某些時(shí)刻執(zhí)行操作。我們對組件生命週期的時(shí)間有了概念：

• componentDidMount 是元件首次渲染並為 DOM 添加元素的時(shí)刻，也是開始連接和 API 請求等副作用的時(shí)刻。
• shouldComponentUpdate 可讓您手動設(shè)定邏輯來比較下一個(gè) props 和狀態(tài)，並傳回布林值來定義是否可以跳過重新渲染。
• componentDidUpdate 是狀態(tài)或 props 變更的時(shí)刻，再次呼叫 render 方法並對身分差異進(jìn)行協(xié)調(diào)變更並應(yīng)用於 DOM，有助於將狀態(tài)與新 props 同步並執(zhí)行邏輯操作。
• componentWillUnmount 是 React 將從 DOM 中刪除元素的時(shí)候，是清理內(nèi)容和避免記憶體洩漏的好地方。

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

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

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

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

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

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

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

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

  }, [dependencyState, dependencyProp]);

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

有什麼問題嗎？

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

React 的這一步有點(diǎn)令人困惑，至少對我來說是這樣。因?yàn)椋D(zhuǎn)向鉤子就是轉(zhuǎn)向反應(yīng)式模型，即使它是一個(gè)粗粒度的模型。但傳達(dá)的訊息是，沒有什麼大的改變。沒有關(guān)於反應(yīng)性概念和理論的內(nèi)容，即使使用 React 多年，我也只是閱讀 Ryan Carniato 關(guān)於反應(yīng)性和固體的部落格文章才開始真正理解反應(yīng)性。

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

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

鉤子的生命週期怎麼樣

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

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

無論是卸載前的第一個(gè)、第十個(gè)還是最後一個(gè)渲染都沒有關(guān)係，而且鉤子不關(guān)心它，順便說一句，甚至 useEffect。

試試看：

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

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

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

  }, [dependencyState, dependencyProp]);

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

您應(yīng)該將應(yīng)用程式程式碼視為簡化的 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)您點(diǎn)擊按鈕並將計(jì)數(shù)加 1 時(shí)，您真正擁有的概念上是這樣的：

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

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

每次點(diǎn)擊都會再次呼叫 fn，並使用新的狀態(tài)，產(chǎn)生新版本的 UI。狀態(tài)應(yīng)該透過使用者的操作或透過非同步派生產(chǎn)生的非同步值來更改。

這樣你就可以保持乾淨(jìng)的想法：

• 狀態(tài)轉(zhuǎn)換進(jìn)行新的 fn 呼叫
• 在新狀態(tài)下，您將獲得 UI 描述
• 如果不同，請更新螢?zāi)弧?

一個(gè)乾淨(jìng)且一致的模型。

渲染器需要關(guān)心在螢?zāi)簧闲略?、更新和刪除元素。在組件級別，重要的是：

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

Hooks 及其響應(yīng)式模型使 React 與瀏覽器解耦，使應(yīng)用程式程式碼不必關(guān)心您處於螢?zāi)讳秩具^程的哪個(gè)時(shí)刻。您不再強(qiáng)制更新，甚至不再按照自己的規(guī)則處理備忘錄，這對於應(yīng)用程式開發(fā)人員來說不太直接，但在模型方面更直接。

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

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