这篇文章给大家介绍如何进行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 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]);}
我们执行这个代码发现,输出是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 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]);}
执行上面的例子,和第一个一样,但是如果我们手动输入一个值的时候,会发现多输出了一个4。这是两个例子的区别,因为第二个effect依赖的delay改变了,所以他会首先执行前一个effect回调返回的destroy函数,清理了前一个定时器,然后重新设置了回调,并且执行了他。
关于如何进行react Hook的原理分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4217331/blog/4379798