React架構(gòu)的演變之如何理解Hooks的實(shí)現(xiàn)

本篇內(nèi)容介紹了“React架構(gòu)的演變之如何理解Hooks的實(shí)現(xiàn)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Hook 如何與組件關(guān)聯(lián)

在之前的文章中多次提到，F(xiàn)iber 架構(gòu)下的 updateQueue、effectList 都是鏈表的數(shù)據(jù)結(jié)構(gòu)，然后掛載的 Fiber  節(jié)點(diǎn)上。而一個(gè)函數(shù)組件內(nèi)所有的 Hooks 也是通過(guò)鏈表的形式存儲(chǔ)的，最后掛載到 fiber.memoizedState 上。

function App() {   const [num, updateNum] = useState(0)    return <div     onClick={() => updateNum(num => num + 1)}   >{ num }</div> }  export default App

我們先簡(jiǎn)單看下，調(diào)用 useState 時(shí)，構(gòu)造鏈表的過(guò)程：

var workInProgressHook = null var HooksDispatcherOnMount = {   useState: function (initialState) {     return mountState(initialState)   } }  function function mountState(initialState) {   // 新的 Hook 節(jié)點(diǎn)   var hook = mountWorkInProgressHook()   // 緩存初始值   hook.memoizedState = initialState   // 構(gòu)造更新隊(duì)列，類似于 fiber.updateQueue   var queue = hook.queue = {     pending: null,     dispatch: null,     lastRenderedState: initialState   }   // 用于派發(fā)更新   var dispatch = queue.dispatch = dispatchAction.bind(     null, workInProgress, queue   )   // [num, updateNum] = useState(0)   return [hook.memoizedState, dispatch] }  function mountWorkInProgressHook() {   var hook = {     memoizedState: null,     baseState: null,     baseQueue: null,     queue: null,     next: null   }    if (workInProgressHook === null) {     // 構(gòu)造鏈表頭節(jié)點(diǎn)     workInProgress.memoizedState = workInProgressHook = hook   } else {     // 如果鏈表已經(jīng)存在，在掛載到 next     workInProgressHook = workInProgressHook.next = hook   }    return workInProgressHook }

如果此時(shí)有兩個(gè) Hook，第二個(gè) Hook 就會(huì)掛載到第一個(gè) Hook 的 next 屬性上。

function App() {   const [num, updateNum] = useState(0)   const [str, updateStr] = useState('value: ')    return <div     onClick={() => updateNum(num => num + 1)}   >{ str } { num }</div> }  export default App

Hook

Hook 的更新隊(duì)列

Hook 通過(guò) .next 彼此相連，而每個(gè) Hook 對(duì)象下，還有個(gè) queue 字段，該字段和 Fiber 節(jié)點(diǎn)上的 updateQueue  一樣，是一個(gè)更新隊(duì)列在，上篇文章 《React 架構(gòu)的演變-更新機(jī)制》中有講到，React Fiber 架構(gòu)中，更新隊(duì)列通過(guò)鏈表結(jié)構(gòu)進(jìn)行存儲(chǔ)。

class App extends React.Component {   state = { val: 0 }   click () {     for (let i = 0; i < 3; i++) {       this.setState({ val: this.state.val + 1 })     }   }   render() {     return <div onClick={() => {       this.click()     }}>val: { this.state.val }</div>   } }

點(diǎn)擊 div 之后，產(chǎn)生的 3 次 setState 通過(guò)鏈表的形式掛載到 fiber.updateQueue 上，待到 MessageChannel  收到通知后，真正執(zhí)行更新操作時(shí)，取出更新隊(duì)列，將計(jì)算結(jié)果更新到 fiber.memoizedState。

setState

而 hook.queue 的邏輯和 fiber.updateQueue 的邏輯也是完全一致的。

function App() {   const [num, updateNum] = useState(0)    return <div     onClick={() => {       // 連續(xù)更新 3 次       updateNum(num => num + 1)       updateNum(num => num + 1)       updateNum(num => num + 1)     }}   >     { num }   </div> }  export default App; var dispatch = queue.dispatch = dispatchAction.bind(   null, workInProgress, queue ) // [num, updateNum] = useState(0) return [hook.memoizedState, dispatch]

調(diào)用 useState 的時(shí)候，返回的數(shù)組第二個(gè)參數(shù)為 dispatch，而 dispatch 由 dispatchAction bind  后得到。

function dispatchAction(fiber, queue, action) {   var update = {     next: null,     action: action,     // 省略調(diào)度相關(guān)的參數(shù)...   };    var pending = queue.pending   if (pending === null) {     update.next = update   } else {     update.next = pending.next     pending.next = update   }   queue.pending = update    // 執(zhí)行更新   scheduleUpdateOnFiber() }

可以看到這里構(gòu)造鏈表的方式與 fiber.updateQueue 如出一轍。之前我們通過(guò) updateNum 對(duì) num 連續(xù)更新了 3  次，最后形成的更新隊(duì)列如下：

更新隊(duì)列

函數(shù)組件的更新

前面的文章分享過(guò)，F(xiàn)iber 架構(gòu)下的更新流程分為遞(beginWork)、歸(completeWork)兩個(gè)步驟，在 beginWork  中，會(huì)依據(jù)組件類型進(jìn)行 render 操作構(gòu)造子組件。

function beginWork(current, workInProgress) {   switch (workInProgress.tag) {     // 其他類型組件代碼省略...     case FunctionComponent: {       // 這里的 type 就是函數(shù)組件的函數(shù)       // 例如，前面的 App 組件，type 就是 function App() {}       var Component = workInProgress.type       var resolvedProps = workInProgress.pendingProps       // 組件更新       return updateFunctionComponent(         current, workInProgress, Component, resolvedProps       )     }   } }  function updateFunctionComponent(  current, workInProgress, Component, nextProps ) {   // 構(gòu)造子組件   var nextChildren = renderWithHooks(     current, workInProgress, Component, nextProps   )   reconcileChildren(current, workInProgress, nextChildren)   return workInProgress.child }

看名字就能看出來(lái)，renderWithHooks 方法就是構(gòu)造帶 Hooks 的子組件。

function renderWithHooks(  current, workInProgress, Component, props ) {   if (current !== null && current.memoizedState !== null) {     ReactCurrentDispatcher.current = HooksDispatcherOnUpdate   } else {     ReactCurrentDispatcher.current = HooksDispatcherOnMount   }   var children = Component(props)   return children }

從上面的代碼可以看出，函數(shù)組件更新或者首次渲染時(shí)，本質(zhì)就是將函數(shù)取出執(zhí)行了一遍。不同的地方在于給 ReactCurrentDispatcher  進(jìn)行了不同的賦值，而 ReactCurrentDispatcher 的值最終會(huì)影響 useState 調(diào)用不同的方法。

根據(jù)之前文章講過(guò)的雙緩存機(jī)制，current 存在的時(shí)候表示是更新操作，不存在的時(shí)候表示首次渲染。

function useState(initialState) {   // 首次渲染時(shí)指向 HooksDispatcherOnMount   // 更新操作時(shí)指向 HooksDispatcherOnUpdate   var dispatcher = ReactCurrentDispatcher.current   return dispatcher.useState(initialState) }

HooksDispatcherOnMount.useState 的代碼前面已經(jīng)介紹過(guò)，這里不再著重介紹。

// HooksDispatcherOnMount 的代碼前面已經(jīng)介紹過(guò) var HooksDispatcherOnMount = {   useState: function (initialState) {     return mountState(initialState)   } }

我們重點(diǎn)看看 HooksDispatcherOnMount.useState 的邏輯。

var HooksDispatcherOnUpdateInDEV = {   useState: function (initialState) {     return updateState()   } }  function updateState() {   // 取出當(dāng)前 hook   workInProgressHook = nextWorkInProgressHook   nextWorkInProgressHook = workInProgressHook.next    var hook = nextWorkInProgressHook   var queue = hook.queue   var pendingQueue = queue.pending    // 處理更新   var first = pendingQueue.next   var state = hook.memoizedState   var update = first    do {     var action = update.action     state = typeof action === 'function' ? action(state) : action      update = update.next;   } while (update !== null && update !== first)     hook.memoizedState = state    var dispatch = queue.dispatch   return [hook.memoizedState, dispatch] }

如果有看之前的 setState 的代碼，這里的邏輯其實(shí)是一樣的。將更新對(duì)象的 action 取出，如果是函數(shù)就執(zhí)行，如果不是函數(shù)就直接對(duì) state  進(jìn)行替換操作。

“React架構(gòu)的演變之如何理解Hooks的實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！