這篇文章給大家介紹如何進(jìn)行react Hook的原理分析，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)是一家集成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站設(shè)計公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。
下面是對這個代碼以及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{count}
;}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，從而導(dǎo)致re-render，每次re-render的時候，首先輸出1，然后又重新執(zhí)行了useInterval函數(shù)，所以輸出2，重新設(shè)置了兩個effect的回調(diào)，因為第一個effect沒有設(shè)置第二個參數(shù)，所以每次re-render都會執(zhí)行，所以輸出3.但是第二個effect依賴于delay的改變，但是delay沒有改變，所以他沒有執(zhí)行。所以沒有輸出4，對于第二個effect，重新設(shè)置了回調(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 heresetCount(count + 1);}, delay);function handleDelayChange(e) {setDelay(Number(e.target.value));}return [{count}
,];}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ù)，清理了前一個定時器，然后重新設(shè)置了回調(diào)，并且執(zhí)行了他。
關(guān)于如何進(jìn)行react Hook的原理分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
