快捷導(dǎo)航

React中useEffect原理的代碼簡(jiǎn)單實(shí)現(xiàn)詳解

更新時(shí)間：2023年12月26日 10:24:46 作者：慕仲卿

React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過(guò)一個(gè)簡(jiǎn)單的例子解釋如何用代碼實(shí)現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下

React的useEffect鉤子是React函數(shù)組件中處理副作用(例如API請(qǐng)求、訂閱或手動(dòng)修改DOM等)的重要工具。在本文中，將通過(guò)一個(gè)簡(jiǎn)單的例子解釋如何用代碼實(shí)現(xiàn)useEffect的基本原理。

首先，定義了兩個(gè)全局變量，用于跟蹤不同的副作用狀態(tài)：

let prevDepsAry = []; // 存放依賴項(xiàng)數(shù)組的上一次值
let effectIndex = 0; // 當(dāng)前副作用索引

prevDepsAry用于記錄上次渲染時(shí)的依賴項(xiàng)數(shù)組，effectIndex用來(lái)標(biāo)示當(dāng)前處理的副作用的位置。

接下來(lái)是useEffect函數(shù)的實(shí)現(xiàn)：

function useEffect(callback, depsAry) {
  // 校驗(yàn)callback是否為函數(shù)
  if (Object.prototype.toString.call(callback) !== '[object Function]') {
    throw new Error('useEffect的第一個(gè)參數(shù)必須是一個(gè)函數(shù)');
  }

  // 不提供依賴項(xiàng)數(shù)組的情況下，默認(rèn)每次渲染都執(zhí)行callback
  if (typeof depsAry === 'undefined') {
    callback();
  } else {
    // 校驗(yàn)depsAry是否為數(shù)組
    if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
      throw new Error('useEffect的第二個(gè)參數(shù)必須是數(shù)組');
    }

    // 獲取依賴項(xiàng)數(shù)組的前一個(gè)值
    let prevDeps = prevDepsAry[effectIndex];

    // 比較依賴項(xiàng)數(shù)組的每一個(gè)值，確定是否發(fā)生變化
    let hasChanged = prevDeps ? !depsAry.every((dep, index) => dep === prevDeps[index]) : true;

    // 如果依賴項(xiàng)變化或者是首次渲染(hasChanged為true)，則執(zhí)行callback
    if (hasChanged) {
      callback();
    }

    // 將當(dāng)前的依賴項(xiàng)數(shù)組存儲(chǔ)起來(lái)，用于下次渲染時(shí)比較
    prevDepsAry[effectIndex] = depsAry;
  }

  // 增加副作用索引，準(zhǔn)備下一個(gè)副作用
  effectIndex++;
}

useEffect的實(shí)現(xiàn)邏輯為：

驗(yàn)證傳入的callback是否為函數(shù)。如果不是，拋出錯(cuò)誤。
如果沒(méi)有傳入depsAry，那么每次組件渲染時(shí)都執(zhí)行callback。
如果傳入了depsAry，首先驗(yàn)證其為數(shù)組。然后，獲取上一次的依賴數(shù)組并與當(dāng)前數(shù)組逐項(xiàng)比較。如果存在差異或者是首次渲染，則執(zhí)行callback。
更新prevDepsAry的對(duì)應(yīng)項(xiàng)，在下次組件渲染時(shí)用作比較。
effectIndex自增，確保下一個(gè)useEffect的處理使用正確的索引。

下一步定義了render函數(shù)：

function render() {
  // 重設(shè)副作用索引
  effectIndex = 0;
  // 使用ReactDOM來(lái)渲染App組件
  ReactDOM.render(<App />, document.getElementById('root'));
}

在每次渲染前，effectIndex必須重置為0，這保證了useEffect在處理依賴項(xiàng)時(shí)的正確性。

最后，在App組件中使用useEffect：

function App() {
  // 使用自定義的useState和useEffect

  useEffect(() => {
    console.log('副作用函數(shù)執(zhí)行了');
    // 在這里可能會(huì)執(zhí)行如API請(qǐng)求、訂閱事件等具有副作用的操作
    // 當(dāng)依賴項(xiàng)發(fā)生變化時(shí)，這里的代碼會(huì)被執(zhí)行
  }, [/* 依賴項(xiàng)數(shù)組 */]);

  return (
    // 組件的JSX結(jié)構(gòu)
    <div></div>
  );
}

在組件中通過(guò)調(diào)用useEffect，并傳遞一個(gè)執(zhí)行副作用操作的函數(shù)以及依賴項(xiàng)數(shù)組，實(shí)現(xiàn)了依賴項(xiàng)變化時(shí)執(zhí)行副作用邏輯的需求。

最后一步，調(diào)用render()以觸發(fā)首次渲染。

通過(guò)上述代碼，我單地回答了如何實(shí)現(xiàn)useEffect的問(wèn)題。當(dāng)然，實(shí)際的ReactuseEffect實(shí)現(xiàn)更加復(fù)雜，并且涉及到調(diào)度和清理操作，但上面的代碼為理解其基本原理提供了良好的起點(diǎn)。

到此這篇關(guān)于React中useEffect原理的代碼簡(jiǎn)單實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)React useEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: