本文主要介紹鉤子中的生命周期(鉤子中的設(shè)計模式)，下面一起看看鉤子中的生命周期(鉤子中的設(shè)計模式)相關(guān)資訊。
鉤子中usestatereact的數(shù)據(jù)從上到下單向流動，即從父組件到子組件，組件的數(shù)據(jù)存儲在props和state中。其實在任何應(yīng)用中，數(shù)據(jù)都是必不可少的。我們需要直接改變頁面的區(qū)域來刷新視圖，或者間接改變其他地方的數(shù)據(jù)。在react中，我們使用道具和狀態(tài)來存儲數(shù)據(jù)。狀態(tài)的主要功能是保存、控制和修改自身的變量狀態(tài)。狀態(tài)是在組件內(nèi)部初始化的，可以由組件自己修改，但是它可以 不要在外面接觸或修改?？梢哉J為它是一個只能由組件本身控制的本地數(shù)據(jù)源。對于反應(yīng)式函數(shù)組件，usestate用于管理自己的狀態(tài)掛鉤函數(shù)。
鉤子#關(guān)于鉤子的含義，阮一峰解釋說，鉤子的含義是，組件盡量寫成純函數(shù)，如果需要外部函數(shù)和副作用，就用鉤子把外部代碼鉤進去，鉤子就是那些鉤子。我覺得這個解釋非常到位。以usestate為例。在編寫一個函數(shù)組件時，這個函數(shù)被掛接并使用，一些內(nèi)部作用域變量，也稱為閉包，存儲在這個函數(shù)內(nèi)部，所以掛接也可以理解為掛接另一個作用域變量和函數(shù)邏輯，在當前作用域中使用。至于為什么要用react鉤子，綜上，還是為了組件復(fù)用，尤其是更細粒度的組件復(fù)用。react中代碼重用的解決方案層出不窮，但總體來說，代碼重用仍然非常復(fù)雜，這很大程度上是因為細粒度的代碼重用不應(yīng)該與組件重用在一起?；诮M件的解決方案如hoc、render props等，相當于先把要復(fù)用的邏輯打包成組件，再利用組件復(fù)用機制實現(xiàn)邏輯復(fù)用，自然受到組件復(fù)用的限制。因此存在擴展性受限、ref劃分、包裝器hell等問題。，所以我們需要有一個簡單直接的代碼復(fù)用方法，函數(shù)。將可復(fù)用的邏輯分離成功能應(yīng)該是最直接、成本最低的代碼復(fù)用方法，但是對于狀態(tài)邏輯，還是需要一些抽象模式(比如可觀察)來實現(xiàn)復(fù)用。這就是hooks的思想，將函數(shù)視為最小的代碼復(fù)用單元，構(gòu)建一些模式來簡化狀態(tài)邏輯的復(fù)用。與上面提到的其他方案相比，hooks使得組件中的邏輯復(fù)用不再與組件復(fù)用在一起，真正是在嘗試從底層解決(組件之間的)細粒度邏輯。此外，這種聲明性邏輯重用方案進一步將組件之間的顯式數(shù)據(jù)流和組合的思想擴展到了組件。
官方對使用react鉤子的動機解釋如下:鉤子解決了過去五年我們在編寫和維護react時遇到的各種看似無關(guān)的問題。無論你是否在學習react，你每天都在使用它，甚至你只是在使用一些組件模型相似的框架來進行react。你或多或少會注意到這些問題?？缃M件重用帶狀態(tài)的有狀態(tài)邏輯非常困難。:react沒有提供將復(fù)用行為綁定到組件的方法，比如connect it to store，一個類似redux的狀態(tài)管理庫。如果你使用過react一段時間，你可能會熟悉渲染道具、高階高階組件等模式來嘗試解決這些問題，但這些模式需要你在使用時重構(gòu)組件，可能會比較麻煩，而且會使代碼不可持續(xù)。使用鉤子，您可以從組件中提取有狀態(tài)邏輯，這樣您就可以獨立地、重復(fù)地使用它們。如果你在react devtools中看到一個典型的react應(yīng)用，你可能會發(fā)現(xiàn)一個由提供者、消費者、高階組件、渲染道具和其他抽象層組成的包裝器地獄。雖然我們可以在devtools中過濾它們，但這反映了一個更深層次的問題:react需要一個更好的原生方法來共享有狀態(tài)邏輯。使用鉤子，可以從組件中抽象出包含狀態(tài)的邏輯，便于獨立測試和重用。同時，鉤子允許您在不改變組件結(jié)構(gòu)的情況下重用有狀態(tài)邏輯，因此您可以很容易地在許多組件之間或與社區(qū)共享鉤子。復(fù)雜的組件變得難以理解。:，我們經(jīng)常要維護一個簡單但難以管理的狀態(tài)邏輯，它包含了混沌狀態(tài)邏輯和一堆有副作用的組件。隨著開發(fā)的深入，它們會越來越大，越來越亂，各種邏輯散落在組件的各處，每個生命周期鉤子都包含一堆不相關(guān)的邏輯。例如，我們的組件可能在componentdimount和componentdidupdate中執(zhí)行一些數(shù)據(jù)拉取工作，但是同一個componentdimount方法也可能包含一些none。關(guān)閉邏輯，比如設(shè)置事件(稍后需要在compon測試來說也非常困難，這也是很多人喜歡結(jié)合react和狀態(tài)管理庫的原因之一，但這通常會引入太多的抽象，需要你在不同的文件之間跳轉(zhuǎn)，并且增加了重用組件的難度。hooks允許你根據(jù)相關(guān)部分(比如設(shè)置訂閱或者獲取數(shù)據(jù))將一個組件拆分成更小的功能，而不是基于生命周期的方法強制拆分。您還可以選擇使用reducer來管理組件的本地狀態(tài)，使其更具可預(yù)測性。難以理解的class:，在代碼復(fù)用和代碼管理上會遇到困難。我們也發(fā)現(xiàn)課堂是學習反應(yīng)的一大障礙。你必須了解javascript中這個的工作模式，它和其他語言有很大的不同。一定不要忘記綁定事件處理程序，也沒有穩(wěn)定的語法建議。這些代碼非常多余。你可以很好地理解道具、狀態(tài)和自頂向下的數(shù)據(jù)流，但是你可以 不要對班級做任何事情。即使是有經(jīng)驗的react開發(fā)者，功能組件和類組件也是有區(qū)別的，甚至兩個組件的使用場景也要區(qū)分。另外，react已經(jīng)發(fā)布五年了，我們希望它在未來五年也能與時俱進，就像其他庫如svelte、angular和glimmer所展示的那樣。最近，我們一直在使用prepack進行組件折疊實驗，并取得了初步成果。但是我們發(fā)現(xiàn)，使用類組件會在不經(jīng)意間鼓勵開發(fā)者使用一些讓優(yōu)化措施失效的方案，類也給當前的工具帶來了一些問題。例如，類可以 不能很好的壓縮，會使熱過載不穩(wěn)定。因此，我們希望提供一個api，使代碼更容易優(yōu)化。為了解決這些問題，hook允許你在非類的情況下使用更多的react特性。從概念上講，react組件一直更像一個函數(shù)，而hook在不犧牲react精神原則的情況下?lián)肀Я撕瘮?shù)。hook提供了無需學習復(fù)雜字母的問題解決方案。數(shù)字或響應(yīng)編程技術(shù)。
us-dust-kbd1i?. file =/src/app . tsx .
從 反應(yīng) 進口與貿(mào)易。/styles . css 導出默認函數(shù)app { const [count，set count]= use state(0)；console . log( 刷新 );const add count == set count(count 1)；return(div { count }/div button onclick = { add count } count/button/)；}第一次渲染頁面時，會渲染app/function組件，實際上是調(diào)用app方法獲取一個虛擬的dom元素，渲染到瀏覽器頁面。當用戶點擊按鈕按鈕時，它會調(diào)用addcount方法，然后再次渲染app/function組件，這實際上是調(diào)用app方法來獲得一個新的虛擬dom元素，然后react會執(zhí)行dom diff算法，這個算改變它。換句話說，其實每次setcount都會重新執(zhí)行app函數(shù)，通過console . log( 刷新 )，每次點擊按鈕控制臺都會打印刷新。那么問題來了。第一次渲染頁面，執(zhí)行1次操作時，將調(diào)用app函數(shù)執(zhí)行const [count，setcount] = use state (0)。這一行代碼，那么它是如何在運算后執(zhí)行同樣的代碼，卻不初始化變量n，也就是始終為0，而是得到n的最新值，考慮到上面的問題，我們可以簡單的實現(xiàn)一個usemystate函數(shù)。關(guān)于鉤子為什么叫鉤子的問題，我們提到了可以掛接一個函數(shù)作用域。然后我們可以完全實現(xiàn)一個鉤子來鉤住一個作用域。簡單來說就是在usemystate中保存一個變量，也就是在閉包中保存這個變量。然后這個變量保存最后一個值，再次調(diào)用時，只需拿出之前保存的值，。ox.io/s/fancy-dust-kbd1i?文件=/src/use-my-state-version-1 .
從 react-dom 從導入應(yīng)用程序 。/app //將其轉(zhuǎn)換并導出以便我們可以強制刷新` app/` export const force refresh == { console . log( forcefreshapp/ );const root element = document . getelementbyid( 根與樹);render(app /，root element)；};force刷新；copy//us: any = null；導出函數(shù)us: t):[t，(n: t)= void]{ sav: t =保存狀態(tài)；const s: t): void = { savestate = new state；force刷新；};return [rtnstate，setstate]；}從 。/use-my-state-version-1進口與貿(mào)易。/styles . css 導出默認函數(shù)app { const [count，set count]= usemystate(0)；console . log( 刷新 );const add count == set count(count 1)；返回(div { count }/div button onclick = { add count } count/button/)；}在cod:1做成對象，比如sav:0，m:0}，不符合要求，因為使用us:[0，0]。事實上，在react中，數(shù)組被替換為類似于單個鏈表的形式。通過n-dust-kbd1i?. file =/src/use-my-state-version-2 . ts .
從 react-dom 從導入應(yīng)用程序 。/app //將其轉(zhuǎn)換并導出以便我們可以強制刷新` app/` export const force refresh == { console . log( forcefreshapp/ );const root element = document . getelementbyid( 根與樹);render(app /，root element)；};force刷新；copy//us:任意[]=[]；設(shè)ind:數(shù)= 0；導出函數(shù)使用我的狀態(tài)tat: t):[t，(n: t)= void]{ const curindex = index；指數(shù)；savestate[curindex]= savestate[curindex]| | state；const rtnstat: t = savestate[curindex]；const s: t): void = { savestate[curindex]= new state；索引= 0；//您必須在渲染前后將“index”的值重置為“0 ”,否則您可以 t確定`掛鉤 借助調(diào)用序列來force refresh；};return [rtnstate，setstate]；}從 。/use-my-state-version-2進口與貿(mào)易。/styles . css 導出默認函數(shù)app { const [count1，set count 1]= usemystate(0)；const [count2，set count 2]= usemystate(0)；console . log( 刷新 );const add count 1 == set count 1(count 1 1)；const add count 2 == set count 2(count 2 1)；return(div { count 1 }/div button onclick = { add count 1 } count 1/button div { count 2 }/div button onclick = { add count 2 } count 2/button/)；}由此可見，多狀態(tài)下可以實現(xiàn)獨立的狀態(tài)更新，那么問題又來了。app/用的是savestate和index，那么其他組件是什么，就是如果多個組件解決了每個組件的獨立作用域，方案1每個組件創(chuàng)建一個savestate和index。但是，一個文件中的幾個組件會導致保存狀態(tài)和索引。方案2放在組件對應(yīng)的虛擬節(jié)點對象上，這也是react采用的方案。savestate和index變量放在組件對應(yīng)的虛擬節(jié)點對象上，savestate在react中的具體實現(xiàn)稱為memoizedstate。事實上，在react中，數(shù)組被替換為類似于單鏈表的形式，所有的hook都被next串聯(lián)起來?？梢钥闯觯瑄sestate對定義的順序有很強的依賴性，保存在usestate數(shù)組中的順序非常重要。在執(zhí)行函數(shù)組件時，可以通過增加下標來獲得相應(yīng)的狀態(tài)值，這將迫使你不改變usestate的順序。比如用條件來判斷是否執(zhí)行usestate，會導致按順序得到的值和期望值不一樣。這個問題在react.usestate本身也會出現(xiàn)，所以react不允許你使用條件判斷來控制函數(shù)組件中使用狀態(tài)的順序，這樣會導致得到的值混亂，類似下面的代碼，會拋出異常。
copy const app == { let state；if(true){ [state，setstate]= react . use state(0)；} return ( div{state}/div )}！-react hook 使用狀態(tài) 被有條件地調(diào)用。react鉤子必須在每個組件render react-hooks/rules-of-hooks中以完全相同的順序被調(diào)用。;這只是usestate的一個簡單實現(xiàn)。react的真實實現(xiàn)可以參考packages/react-reconcile r/src/react fiberhooks . js，react的當前版本是16.10.2，也可以簡單看一下相關(guān)類型。
復(fù)制類型hooks = {m: any，//指向當前渲染節(jié)點的最終狀態(tài)值fib: any，//初始化n:更新any | null，//每次更新后，會給當前需要更新的‘update’分配最后一個‘update’，方便react 回溯qu:更新qu:鉤子| null。//` link ;到下一個&;鉤子 并連接所有的`鉤 通過&;下一個 }一天一個問題。#copy#copy 696355956366467102 juejin . cn/post/69449087877375734791 juejin . cn/post/6844903990958784526 juejin . cn/post/6865473218414247944 echo
組件重用
了解更多鉤子中的生命周期(鉤子中的設(shè)計模式)相關(guān)內(nèi)容請關(guān)注本站點。