Before Reading
90% of the flow chart is from the React Technology Reveal book, which is organized so that students who are learning source code can systematically connect the key points together. The following JPG images are fuzzy and large in width and height, and it is not convenient to open the PDF with a mobile phone. It is recommended to use the computer to jump to the following PDF address for viewing, with questions to read.
The React concept
React15 differs from React > 16 2. What are the components of Fiber nodes? 3, Fiber tree structure? What is depth-first traversal? 4, Fiber working principle (double cache technology)? 5. What is the process of Fiber Mount and Update? What is the difference between JSX and Fiber?
PDF address: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
The React render phase
1. What do I need to do before I get to render? 2. How to start building Fiber nodes and Fiber trees? 3. How does beginWork work in the “pass” stage? 4. How does the ‘return stage’ completeWork work? 5, how to determine whether to mount or update? What are the final products of the Render phase (generation of effectList, creation of Fiber node)?
PDF address: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
The React the commit phase
1. How to start commitRoot phase? 2. What is done before the before mutation phase (flushPassiveEffects(), which triggers useEffect callbacks to other synchronization tasks)? 3, rootFiber’s effectTag is not in the effectList. 4. What was done during the before mutation phase (before the Dom operation)? 5. What does the mutation phase (Dom operation) do? 6. What does the Layout stage do? 7. What did layout do after that? 8. What is the end product?
PDF address: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
The React Diff algorithm
1. What is diff algorithm? 2. Diff concept? 3. What stage does the DIFF algorithm occur? 4. Default limits for Diff? 5. How is DIff implemented?
PDF address: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
React Status Update
1. Trigger status update critical link? 2. What are the methods for triggering status updates? HostRoot/ClassComponent Update object structure 4. UpdateQueue structure for ClassComponent/HostRoot 5. Update Ue workflow? 6. Scheduling priority process? 7, Why componentWillXXX will trigger many times, to add a unsafe_? 8. How to ensure that updates are not lost? 9, reactdom.render process? 10, this.setState, this.forceUpdate process? 11. What are the three modes for the React portal?
PDF address: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
React Hook
1, a minimalist implementation of useState Hook (highly recommended, this part of the code is posted below, 2, The hook data structure (similar to updateQueue) 3, the mount/update call method will be distinguished by different dispatcher 4, useState and useReducer principle overview (compared with the above simple useState UsEffect (through the flushPassiveEffects method mentioned in the previous flow charts) overview What does the RENDER phase do for the ref workflow? What does the COMMIT phase do? 7, useMemo, useCallback principle overview, and mount, update the difference between the two
PDF address bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react…
Minimal implementation of useState Hook
// mount let isMount = true; // Use the workInProgressHook variable to point to the current working hook let workInProgressHook; // Save memoizedState: null, // point to App function stateNode: App}; Function APP () {const [num, updateNum] = useState(0); console.log(`${isMount ? 'mount' : 'update'} num: `, num); return { click() { updateNum(num => num + 1); Function schedule() {// Set workInProgressHook as the first Hook in fiber The workInProgressHook variable points to the currently working hook workInProgressHook = fiber. MemoizedState; // Render fiber.statenode (); // Render isMount for the first time, update isMount = false; } function dispatchAction(queue, action) {const update = {action, // next: Queue if (queue.pending === null) {update.next = update; } else { update.next = queue.pending.next; queue.pending.next = update; } queue.pending = update; // React starts to update schedule(); } function useState(initialState) { let hook; Queue hook = {queue: {pending: Null}, // save the state memoizedState: initialState corresponding to the hook, // connect with the next hook to form a unidirectionalacyclic list next: Null} // Insert the hook into the end of fiber. MemoizedState if (! fiber.memoizedState) { fiber.memoizedState = hook; } else { workInProgressHook.next = hook; } // change the progresshook pointer to workInProgressHook = hook; } else {// update useState from workInProgressHook hook = workInProgressHook; // In component render, we move the pointer to the workInProgressHook every time we encounter the next useState. // As long as the sequence and number of useState calls remain the same each time the component renders, the workInProgressHook can always find the corresponding hook object of the current useState. workInProgressHook = workInProgressHook.next; } let baseState = hook.memoizedState; If (hook. Queue.pending) {// get the firstUpdate let in the update loop. Do {// execute update action const action = firstupdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next; } while (firstUpdate! Hook. Queue. Pending = null; } // Create memoizedState as memoizedState hook. MemoizedState = baseState; return [baseState, dispatchAction.bind(null, hook.queue)]; }Copy the code