本文不會過多講解基礎(chǔ)知識，更多說的是在使用useRef如何能擺脫 這個 “閉包陷阱” ？ 

　　react hooks 的“閉包陷阱” 基本每個開發(fā)員都有遇見，這是很令人抓狂的。

　　(以下react示范demo，均為react 16.8.3 版本)

　　列一個具體的場景：

　　function App(){
　　const [count, setCount] = useState(1);
　　useEffect(()=>{
　　setInterval(()=>{
　　console.log(count)
　　}, 1000)
　　}, [])
　　}

　　其實結(jié)果都回事1。不相信就可以看。咋樣是不是很懵。我們先淺談一些hooks其他的特性。

　　1、一個熟悉的閉包場景

　　首先從一個各位jser都很熟悉的場景入手。

　　for ( var i=0; i<5; i++ ) {
　　setTimeout(()=>{
　　console.log(i)
　　}, 0)
　　}

　  這樣打印的都是5的原因了?，F(xiàn)在就直接貼出使用閉包打印 0...4的代碼：

　　for ( var i=0; i<5; i++ ) {
　　(function(i){
　　setTimeout(()=>{
　　console.log(i)
　　}, 0)
　　})(i)
　　}

　　這個原理其實就是使用閉包，定時器的回調(diào)函數(shù)去引用立即執(zhí)行函數(shù)里定義的變量，形成閉包保存了立即執(zhí)行函數(shù)執(zhí)行時 i 的值，異步定時器的回調(diào)函數(shù)才如我們想要的打印了順序的值。

　　其實，useEffect的哪個場景的原因，跟這個，簡直是一樣的，useEffect閉包陷阱場景的出現(xiàn)，是 react 組件更新流程以及useEffect的實現(xiàn)的自然而然結(jié)果。

　　2 淺談hooks原理，理解useEffect 的 “閉包陷阱” 出現(xiàn)原因

　　這里有很多內(nèi)容，不細(xì)說，大家可以自己深入了解。

       首先，可能都聽過react的 Fiber 架構(gòu)，其實一個 Fiber節(jié)點就對應(yīng)的是一個組件。對于classComponent而言，有state是一件很正常的事情，F(xiàn)iber對象上有一個memoizedState用于存放組件的state。

　　ok，現(xiàn)在看 hooks 所針對的FunctionComponnet。 無論開發(fā)者怎么折騰，一個對象都只能有一個state屬性或者memoizedState屬性，可是，誰知道可愛的開發(fā)者們會在FunctionComponent里寫上多少個useState，useEffect等等 ? 所以，react用了鏈表這種數(shù)據(jù)結(jié)構(gòu)來存儲FunctionComponent里面的 hooks。比如：

　　function App(){
　　const [count, setCount] = useState(1)
　　const [name, setName] = useState('chechengyi')
　　useEffect(()=>{
　　}, [])
　　const text = useMemo(()=>{
　　return 'ffffd'
　　}, [])
　　}

　　在組件第一次渲染的時候，為每個hooks都創(chuàng)建了一個對象

　　type Hook = {
　　memoizedState: any,
　　baseState: any,
　　baseUpdate: Update<any, any> | null,
　　queue: UpdateQueue<any, any> | null,
　　next: Hook | null,
　　};

　　最終形成了一個鏈表。

　　這個對象的memoizedState屬性就是用來存儲組件上一次更新后的state,next毫無疑問是指向下一個hook對象。在組件更新的過程中，hooks函數(shù)執(zhí)行的順序是不變的，就可以根據(jù)這個鏈表拿到當(dāng)前hooks對應(yīng)的Hook對象，函數(shù)式組件就是這樣擁有了state的能力。這里就不展開細(xì)說。

　　其實這刻意解釋就是為什么不能將hooks寫到if else語句中了把？因為這樣可能會導(dǎo)致順序錯亂，導(dǎo)致當(dāng)前hooks拿到的不是自己對應(yīng)的Hook對象。

　　useEffect接收了兩個參數(shù)，一個回調(diào)函數(shù)和一個數(shù)組。數(shù)組里面就是useEffect的依賴，當(dāng)為 [] 的時候，回調(diào)函數(shù)只會在組件第一次渲染的時候執(zhí)行一次。如果有依賴其他項，react 會判斷其依賴是否改變，如果改變了就會執(zhí)行回調(diào)函數(shù)。說回最初的場景：

　　function App(){
　　const [count, setCount] = useState(1);
　　useEffect(()=>{
　　setInterval(()=>{
　　console.log(count)
　　}, 1000)
　　}, [])
　　function click(){ setCount(2) }
　　}

     現(xiàn)在構(gòu)建，組件第一次渲染執(zhí)行App()，執(zhí)行useState設(shè)置了初始狀態(tài)為1，所以此時的count為1。然后執(zhí)行了useEffect，回調(diào)函數(shù)執(zhí)行，設(shè)置了一個定時器每隔 1s 打印一次count。

　　當(dāng)click函數(shù)被觸發(fā)了，調(diào)用setCount(2)肯定會觸發(fā)react的更新，更新到當(dāng)前組件的時候也是執(zhí)行App()，之前說的鏈表已經(jīng)形成了哈，此時useState將Hook對象 上保存的狀態(tài)置為2， 那么此時count也為2了。然后在執(zhí)行useEffect由于依賴數(shù)組是一個空的數(shù)組，所以此時回調(diào)并不會被執(zhí)行。

　　但又有一個新問題。這次更新的過程中根本就沒有涉及到這個定時器，這個定時器還在堅持的，默默的，每隔1s打印一次count。 注意這里打印的count，是組件第一次渲染的時候App()時的count，count的值為1，因為在定時器的回調(diào)函數(shù)里面被引用了，形成了閉包一直被保存。

　　2 難道真的要在依賴數(shù)組里寫上的值，才能拿到新鮮的值？

　　仿佛都習(xí)慣性都去認(rèn)為，只有在依賴數(shù)組里寫上我們所需要的值，才能在更新的過程中拿到最新鮮的值。那么看一下這個場景：

　function App() {
　　return <Demo1 />
　　}
　　function Demo1(){
　　const [num1, setNum1] = useState(1)
　　const [num2, setNum2] = useState(10)
　　const text = useMemo(()=>{
　　return `num1: ${num1} | num2:${num2}`
　　}, [num2])
　　function handClick(){
　　setNum1(2)
　　setNum2(20)
　　}
　　return (
　　<div>
　　{text}
　　<div><button onClick={handClick}>click!</button></div>
　　</div>
　　)
　　}

　　text是一個useMemo，它的依賴數(shù)組里面只有num2，沒有num1，卻同時使用了這兩個state。當(dāng)點擊button 的時候，num1和num2的值都改變了。那么，只寫明了依賴num2的 text 中能否拿到 num1 最新鮮的值呢？

　　如果你裝了react的 eslint 插件，這里也許會提示你錯誤，因為在text中你使用了 num1 卻沒有在依賴數(shù)組中添加它。 但是執(zhí)行這段代碼會發(fā)現(xiàn)，是可以正常拿到num1最新鮮的值的。

　　其實這要回過頭看看之前說的第一點“閉包陷阱”問題，也就不難理解。

　　現(xiàn)在再重復(fù)一遍，這個依賴數(shù)組存在的意義，是react為了判定，在本次更新中，是否需要執(zhí)行其中的回調(diào)函數(shù)，這里依賴了的num2，而num2改變了?；卣{(diào)函數(shù)自然會執(zhí)行， 這時形成的閉包引用的就是最新的num1和num2，所以，自然能夠拿到新鮮的值。問題的關(guān)鍵，在于回調(diào)函數(shù)執(zhí)行的時機，閉包就像是一個照相機，把回調(diào)函數(shù)執(zhí)行的那個時機的那些值保存了下來。之前說的定時器的回調(diào)函數(shù)我想就像是一個從1000年前穿越到現(xiàn)代的人，雖然來到了現(xiàn)代，但是身上的血液、頭發(fā)都是1000年前的。

　　3 為什么使用useRef能夠每次拿到新鮮的值？

　　看看下面代碼：　

　var A = {name: 'chechengyi'}
　　var B = A
　　B.name = 'baobao'
　　console.log(A.name) // baobao

　　對，這就是這個場景成立的最根本原因。

　　也就是說，在組件每一次渲染的過程中。 比如ref = useRef()所返回的都是同一個對象，每次組件更新所生成的ref指向的都是同一片內(nèi)存空間， 那么當(dāng)然能夠每次都拿到最新鮮的值了。其實與犬夜叉中一口古井連接了現(xiàn)代世界與500年前的戰(zhàn)國時代，這個同一個對象也將這些個被保存于不同閉包時機的變量了聯(lián)系了起來。

　　使用一個例子或許好理解一點：　

　/* 將這些相關(guān)的變量寫在函數(shù)外 以模擬react hooks對應(yīng)的對象 */
　　let isC = false
　　let isInit = true; // 模擬組件第一次加載
　　let ref = {
　　current: null
　　}
　　function useEffect(cb){
　　// 這里用來模擬 useEffect 依賴為 [] 的時候只執(zhí)行一次。
　　if (isC) return
　　isC = true
　　cb()
　　}
　　function useRef(value){
　　// 組件是第一次加載的話設(shè)置值 否則直接返回對象
　　if ( isInit ) {
　　ref.current = value
　　isInit = false
　　}
　　return ref
　　}
　　function App(){
　　let ref_ = useRef(1)
　　ref_.current++
　　useEffect(()=>{
　　setInterval(()=>{
　　console.log(ref.current) // 3
　　}, 2000)
　　})
　　}
　　// 連續(xù)執(zhí)行兩次 第一次組件加載 第二次組件更新
　　App()
　　App()

　　所以，提出一個合理的設(shè)想。只要我們能保證每次組件更新的時候，useState返回的是同一個對象的話？我們也能繞開閉包陷阱這個情景嗎？ 動手操作最有力。

　　function App() {
　　// return <Demo1 />
　　return <Demo2 />
　　}
　　function Demo2(){
　　const [obj, setObj] = useState({name: 'chechengyi'})
　　useEffect(()=>{
　　setInterval(()=>{
　　console.log(obj)
　　}, 2000)
　　}, [])
　　function handClick(){
　　setObj((prevState)=> {
　　var nowObj = Object.assign(prevState, {
　　name: 'baobao',
　　age: 24
　　})
　　console.log(nowObj == prevState)
　　return nowObj
　　})
　　}
　　return (
　　<div>
　　<div>
　　<span>name: {obj.name} | age: {obj.age}</span>
　　<div><button onClick={handClick}>click!</button></div>
　　</div>
　　</div>
　　)
　　}

　　簡單說下這段代碼，在執(zhí)行setObj的時候，傳入的是一個函數(shù)。這種用法就不用我多說了把？然后Object.assign返回的就是傳入的第一個對象。總兒言之，就是在設(shè)置的時候返回了同一個對象。

　　執(zhí)行這段代碼發(fā)現(xiàn)，確實點擊button后，定時器打印的值也變成了：

　　{
　　name: 'baobao',
　　age: 24
　　}

　　4 完畢

　　其實“閉包陷阱” 淺談 react hooks 更是一種總結(jié)，掌握知識、項目經(jīng)驗都是缺一不可的。