溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何進行react Hook的原理分析

發(fā)布時間：2021-12-09 09:43:55 來源：億速云 閱讀：100 作者：柒染 欄目：大數(shù)據(jù)

這篇文章給大家介紹如何進行react Hook的原理分析，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

下面是對這個代碼以及react hook的分析。二話不說，直接上代碼。



import React, { useState, useEffect, useRef } from 'react';export default function App() {  console.log(1)  let [count, setCount] = useState(0);  useInterval(() => {    // Your custom logic here    setCount(count + 1);  }, 1000);

  return <h2>{count}</h2>;}var ref = nullfunction useInterval(callback, delay) {  console.log(2)  const savedCallback = useRef();  if (ref) {    console.log(ref===savedCallback)  } else {    ref = savedCallback;  }  // Remember the latest callback.  useEffect(() => {    console.log(3)    savedCallback.current = callback;  });

  // Set up the interval.  useEffect(() => {    console.log(4)    function tick() {      savedCallback.current();    }    if (delay !== null) {      let id = setInterval(tick, delay);      return () => clearInterval(id);    }  }, [delay]);}

我們執(zhí)行這個代碼發(fā)現(xiàn)，輸出是1,2,3,4,1,2,true,3,1,2,true,3。首先可以發(fā)現(xiàn)useRef每次執(zhí)行的時候返回的都是一樣的值。下面我們分析一下整個流程，第一個執(zhí)行的時候，輸出1,2,是很好理解的。然后在render結(jié)束后，會執(zhí)行兩個effect里的回調(diào)。所以輸出了3,4也是可以理解的。執(zhí)行完4之后開啟了一個定時器。每隔一段時間定時器的回調(diào)就會執(zhí)行，回調(diào)函數(shù)更新了state，從而導致re-render，每次re-render的時候，首先輸出1，然后又重新執(zhí)行了useInterval函數(shù)，所以輸出2，重新設置了兩個effect的回調(diào)，因為第一個effect沒有設置第二個參數(shù)，所以每次re-render都會執(zhí)行，所以輸出3.但是第二個effect依賴于delay的改變，但是delay沒有改變，所以他沒有執(zhí)行。所以沒有輸出4，對于第二個effect，重新設置了回調(diào)是為了保證拿到閉包里的參數(shù)是最新的，但是react保存的destroy函數(shù)，即effect回調(diào)執(zhí)行時返回的函數(shù)。是第一次render的時候返回的那個。后面的re-render同理。

下面再看文章中的另一個例子。



import React, { useState, useEffect, useRef } from 'react';export default function App() {  console.log(1)  let [count, setCount] = useState(0);  let [delay, setDelay] = useState(1000);

  useInterval(() => {    // Your custom logic here    setCount(count + 1);  }, delay);

  function handleDelayChange(e) {    setDelay(Number(e.target.value));  }



  return [<h2>{count}</h2>,<input value={delay} onChange={handleDelayChange} />];}var ref = null;function useInterval(callback, delay) {  console.log(2)  const savedCallback = useRef();  if (ref) {    console.log(ref === savedCallback)  } else {    ref = savedCallback;  }  // Remember the latest callback.  useEffect(() => {    console.log(3)    savedCallback.current = callback;  });

  // Set up the interval.  useEffect(() => {    console.log(4)    function tick() {      savedCallback.current();    }    if (delay !== null) {      let id = setInterval(tick, delay);      return () => clearInterval(id);    }  }, [delay]);}

執(zhí)行上面的例子，和第一個一樣，但是如果我們手動輸入一個值的時候，會發(fā)現(xiàn)多輸出了一個4。這是兩個例子的區(qū)別，因為第二個effect依賴的delay改變了，所以他會首先執(zhí)行前一個effect回調(diào)返回的destroy函數(shù)，清理了前一個定時器，然后重新設置了回調(diào)，并且執(zhí)行了他。

關于如何進行react Hook的原理分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手