這篇文章主要介紹“怎么學(xué)習(xí)React Hooks原理”，在日常操作中，相信很多人在怎么學(xué)習(xí)React Hooks原理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么學(xué)習(xí)React Hooks原理”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
荔波網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),荔波網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為荔波千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的荔波做網(wǎng)站的公司定做！
為什么要學(xué)習(xí) React Hooks 原理
首先，功利點來說：目前前端框架三分天下：React、Vue、Angular，而 React 自從 v16.8.0 版本正式推出 React Hooks 概念后，風(fēng)勢已經(jīng)從原來的類組件猛地轉(zhuǎn)向函數(shù)組件，這是一個在設(shè)計模式、心智模型層次，且非常近期的革新，因此只要是你談到自己會 React ，就一定會在面試中被問到 React Hooks 的原理。
再者，從實際角度出發(fā)，了解 React Hooks 原理對我們?nèi)粘ｉ_發(fā)調(diào)試都有莫大的好處；我們可以認(rèn)識到 React Hooks 其實也并不是什么黑魔法，我們在開發(fā)中碰到的奇奇怪怪的問題，只不過是我們還沒有掌握 React Hooks 導(dǎo)致的，也不需要用一些 tricky 的方法來解決。
useState / useReducer
useState 和 useReducer 都是關(guān)于狀態(tài)值的提取和更新，從本質(zhì)上來說沒有區(qū)別，從實現(xiàn)上，可以說 useState 是 useReducer 的一個簡化版，其背后用的都是同一套邏輯。
React Hooks 如何保存狀態(tài)
React 官方文檔中有提到，React Hooks 保存狀態(tài)的位置其實與類組件的一致；翻看源碼后，我發(fā)現(xiàn)這樣的說法沒錯，但又不全面：
兩者的狀態(tài)值都被掛載在組件實例對象FiberNode的memoizedState屬性中。
兩者保存狀態(tài)值的數(shù)據(jù)結(jié)構(gòu)完全不同；類組件是直接把 state 屬性中掛載的這個開發(fā)者自定義的對象給保存到memoizedState屬性中；而 React Hooks 是用鏈表來保存狀態(tài)的，memoizedState屬性保存的實際上是這個鏈表的頭指針。
下面我們來看看這個鏈表的節(jié)點是什么樣的 —— Hook 對象：
重慶分公司
重慶分公司
// react-reconciler/src/ReactFiberHooks.js export type Hook = { memoizedState: any, // 最新的狀態(tài)值 baseState: any, // 初始狀態(tài)值，如`useState(0)`，則初始值為0 baseUpdate: Update | null, queue: UpdateQueue | null, // 臨時保存對狀態(tài)值的操作，更準(zhǔn)確來說是一個鏈表數(shù)據(jù)結(jié)構(gòu)中的一個指針 next: Hook | null, // 指向下一個鏈表節(jié)點 }; 官方文檔一直強(qiáng)調(diào) React Hooks 的調(diào)用只能放在函數(shù)組件/自定義 Hooks 函數(shù)體的頂層，這是因為我們只能通過 Hooks 調(diào)用的順序來與實際保存的數(shù)據(jù)結(jié)構(gòu)來關(guān)聯(lián)：
PS：雖然上面一致都是以 useState 和 useReducer 來作為例子說明，但實際上所有 React Hooks 都是用這種鏈表的方式來保存的。
React Hooks 如何更新狀態(tài)
熟悉 useState API 的話，我們都知道怎么去更新狀態(tài)：
const [name, setName] = useState('') setName('張三')那么，由 useState 返回的這個用來更新狀態(tài)的函數(shù)（下文稱為 dispatcher），運(yùn)行的原理是怎么樣的呢？
當(dāng)我們在每次調(diào)用 dispatcher 時，并不會立刻對狀態(tài)值進(jìn)行修改（對的，狀態(tài)值的更新是異步的），而是創(chuàng)建一條修改操作——在對應(yīng) Hook 對象的queue屬性掛載的鏈表上加一個新節(jié)點：
在下次執(zhí)行函數(shù)組件，再次調(diào)用 useState 時， React 才會根據(jù)每個 Hook 上掛載的更新操作鏈表來計算最新的狀態(tài)值。你也許會好奇，為什么要把更新操作都保存起來呢，只保存最新的一次更新操作不就行了嗎？你會這樣想，大概是忘了 useState 支持這樣的語法了吧：
const [name, setName] = useState('') setName(name => name + 'a') setName(name => name + 'b') setName(name => name + 'c') // 下次執(zhí)行時就可以得到 name 的最新狀態(tài)值為'abc'啦useEffect
useEffect 的保存方式與 useState / useReducer 類似，也是以鏈表的形式掛載在FiberNode.updateQueue中。
下面我們按 mount 和 update 這兩個組件生命周期來闡述 useEffect 的執(zhí)行原理：
mount 階段：mountEffect
根據(jù)函數(shù)組件函數(shù)體中依次調(diào)用的 useEffect 語句，構(gòu)建成一個鏈表并掛載在FiberNode.updateQueue中，鏈表節(jié)點的數(shù)據(jù)結(jié)構(gòu)為：
const effect: Effect = { tag, // 用來標(biāo)識依賴項有沒有變動 create, // 用戶使用useEffect傳入的函數(shù)體 destroy, // 上述函數(shù)體執(zhí)行后生成的用來清除副作用的函數(shù) deps, // 依賴項列表 next: (null: any), };組件完成渲染后，遍歷鏈表執(zhí)行。
update 階段：updateEffect
同樣在依次調(diào)用 useEffect 語句時，判斷此時傳入的依賴列表，與鏈表節(jié)點Effect.deps中保存的是否一致（基本數(shù)據(jù)類型的值是否相同；對象的引用是否相同），如果一致，則在Effect.tag標(biāo)記上NoHookEffect。
執(zhí)行階段
在每次組件渲染完成后，就會進(jìn)入 useEffect 的執(zhí)行階段：function commitHookEffectList()：
遍歷鏈表
如果遇到Effect.tag被標(biāo)記上NoHookEffect的節(jié)點則跳過。
如果Effect.destroy為函數(shù)類型，則需要執(zhí)行該清除副作用的函數(shù)（至于這Effect.destroy是從哪里來的，下面馬上說到）
執(zhí)行Effect.create，并將執(zhí)行結(jié)果保存到Effect.destroy（如果開發(fā)者沒有配置return，那得到的自然是undefined了，也就是說，開發(fā)者認(rèn)為對于當(dāng)前 useEffect 代碼段，不存在需要清除的副作用）；注意由于閉包的緣故，Effect.destroy實際上可以訪問到本次Effect.create函數(shù)作用域內(nèi)的變量。
我們重點請注意到：是先清除上一輪的副作用，然后再執(zhí)行本輪的 effect 的。
其它 React Hooks Api
其它的的 React Hooks Api ，其實也差不多是這樣的原理：用鏈表數(shù)據(jù)結(jié)構(gòu)來做全局狀態(tài)保持；判斷依賴項決定是否要更新狀態(tài)等等，這里不再累述。
到此，關(guān)于“怎么學(xué)習(xí)React Hooks原理”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
標(biāo)題名稱：怎么學(xué)習(xí)ReactHooks原理
網(wǎng)站網(wǎng)址：http://weahome.cn/article/jcegci.html
