溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何進行react Hook的原理分析，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
下面是對這個代碼以及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 heresetCount(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]);}
我們執行這個代碼發現，輸出是1,2,3,4,1,2,true,3,1,2,true,3。首先可以發現useRef每次執行的時候返回的都是一樣的值。下面我們分析一下整個流程，第一個執行的時候，輸出1,2,是很好理解的。然后在render結束后，會執行兩個effect里的回調。所以輸出了3,4也是可以理解的。執行完4之后開啟了一個定時器。每隔一段時間定時器的回調就會執行，回調函數更新了state，從而導致re-render，每次re-render的時候，首先輸出1，然后又重新執行了useInterval函數，所以輸出2，重新設置了兩個effect的回調，因為第一個effect沒有設置第二個參數，所以每次re-render都會執行，所以輸出3.但是第二個effect依賴于delay的改變，但是delay沒有改變，所以他沒有執行。所以沒有輸出4，對于第二個effect，重新設置了回調是為了保證拿到閉包里的參數是最新的，但是react保存的destroy函數，即effect回調執行時返回的函數。是第一次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 heresetCount(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]);}
執行上面的例子，和第一個一樣，但是如果我們手動輸入一個值的時候，會發現多輸出了一個4。這是兩個例子的區別，因為第二個effect依賴的delay改變了，所以他會首先執行前一個effect回調返回的destroy函數，清理了前一個定時器，然后重新設置了回調，并且執行了他。
關于如何進行react Hook的原理分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
