React超详细分析useState与useReducer源码_React_

var hook = { memoizedState: null, // 存储hook操作，不要和fiber.memoizedState搞混了 baseState: null, baseQueue: null, queue: null, // 存储该hook本次更新阶段的所有更新操作 next: null // 链接下一个hook }; 

function App(){ const [count, setCount] = useState(0) const handleClick = () => { setCount(count => count + 1) } return ( 
 勇敢牛牛, 不怕困难{count}
 ) }

function useState(initialState) { var dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } 

function mountState(initialState) { var hook = mountWorkInProgressHook(); // workInProgressHook if (typeof initialState === 'function') { // 在这里，如果我们传入的参数是函数，会执行拿到return作为initialState initialState = initialState(); } hook.memoizedState = hook.baseState = initialState; var queue = hook.queue = { pending: null, dispatch: null, lastRenderedReducer: basicStateReducer, lastRenderedState: initialState }; var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue); return [hook.memoizedState, dispatch]; }

function mountWorkInProgressHook() { var hook = { memoizedState: null, baseState: null, baseQueue: null, queue: null, next: null }; // 这里的if/else主要用来区分是否是第一个hook if (workInProgressHook === null) { currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook; } else { // 把hook加到hooks链表的最后一条， 并且指针指向这条hook workInProgressHook = workInProgressHook.next = hook; } return workInProgressHook; }

function dispatchAction(fiber, queue, action) { // 创建一个update，用于后续的更新，这里的action就是我们setState的入参 var update = { lane: lane, action: action, eagerReducer: null, eagerState: null, next: null }; // 这段闭环链表插入update的操作有没有很熟悉？ var pending = queue.pending; if (pending === null) { update.next = update; } else { update.next = pending.next; pending.next = update; } queue.pending = update; var alternate = fiber.alternate; // 判断当前是否是渲染阶段 if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) { var lastRenderedReducer = queue.lastRenderedReducer; // 这个if语句里的一大段就是用来判断我们这次更新是否和上次一样，如果一样就不会在进行调度更新 if (lastRenderedReducer !== null) { var prevDispatcher; { prevDispatcher = ReactCurrentDispatcher$1.current; ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV; } try { var currentState = queue.lastRenderedState; var eagerState = lastRenderedReducer(currentState, action); update.eagerReducer = lastRenderedReducer; update.eagerState = eagerState; if (objectIs(eagerState, currentState)) { return; } } finally { { ReactCurrentDispatcher$1.current = prevDispatcher; } } } } // 将携带有update的fiber进行调度更新 scheduleUpdateOnFiber(fiber, lane, eventTime); } }

function updateState(initialState) { return updateReducer(basicStateReducer); } 

function updateReducer(reducer, initialArg, init) { // 创建一个新的hook，带有dispatchAction创建的update var hook = updateWorkInProgressHook(); var queue = hook.queue; queue.lastRenderedReducer = reducer; var current = currentHook; var baseQueue = current.baseQueue; var pendingQueue = queue.pending; current.baseQueue = baseQueue = pendingQueue; if (baseQueue !== null) { // 从这里能看到之前讲的创建闭环链表插入update的好处了吧？直接next就能找到第一个update var first = baseQueue.next; var newState = current.baseState; var update = first; // 开始遍历update链表执行所有setState do { var updateLane = update.lane; // 假如我们这个update上有多个setState，在循环过程中，最终都会做合并操作 var action = update.action; // 这里的reducer会判断action类型，下面讲 newState = reducer(new
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：React渲染机制超详细讲解_React_
                                                                
下一篇：Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)_vue.js_