14. React

14. React

Video courses (efficient Learning) :Into the curriculum

Course Contents:

1. Introduction and questions

2. React design philosophy

React source code architecture

4. Source directory structure and debugging

5. JSX & core API

Legacy and Concurrent mode entry functions

7. Fiber architecture

8. Render phase

9. The diff algorithm

10. com MIT stage

11. Life cycle

12. Status update process

13. Hooks the source code

14. Handwritten hooks

15.scheduler&Lane

16. Concurrent mode

17.context

18 Event System

19. Write the React mini

20. Summary & Answers to interview questions in Chapter 1

21.demo

The most important thing to understand is the pointer to the Hook queue and update queue and the update ue calculation, as explained in the video

import React from "react";
import ReactDOM from "react-dom";

let workInProgressHook;// Current working hook
let isMount = true;// Whether to mount time

const fiber = {/ / fiber node
  memoizedState: null./ / hook chain table
  stateNode: App//dom
};

const Dispatcher = (() = > {/ / the Dispatcher object
  function mountWorkInProgressHook() {/ / call when the mount
    const hook = {/ / build the hooks
      queue: {// Update the queue
        pending: null// Update queue not executed
      },
      memoizedState: null./ / the current state
      next: null// Next hook
    };
    if(! fiber.memoizedState) { fiber.memoizedState = hook;// The first hook is directly assigned to Fibre. memoizedState
    } else {
      workInProgressHook.next = hook;// If it is not the first hook, add it after the previous hook to form a linked list
    }
    workInProgressHook = hook;// Record the current working hook
    return workInProgressHook;
  }
  function updateWorkInProgressHook() {/ / update call
    let curHook = workInProgressHook;
    workInProgressHook = workInProgressHook.next;// Next hook
    return curHook;
  }
  function useState(initialState) {
    let hook;
    if (isMount) {
      hook = mountWorkInProgressHook();
      hook.memoizedState = initialState;// Initial state
    } else {
      hook = updateWorkInProgressHook();
    }

    let baseState = hook.memoizedState;// Initial state
    if (hook.queue.pending) {
      let firstUpdate = hook.queue.pending.next;// The first update

      do {
        const action = firstUpdate.action;
        baseState = action(baseState);
        firstUpdate = firstUpdate.next;// Loop through the update list
      } while(firstUpdate ! == hook.queue.pending);// Calculate state using the action of update

      hook.queue.pending = null;// Reset the update list
    }
    hook.memoizedState = baseState;// Assign a new state

    return [baseState, dispatchAction.bind(null, hook.queue)];/ / useState returns
  }

  return{ useState }; }) ();function dispatchAction(queue, action) {// Trigger the update
  const update = {/ / build the update
    action,
    next: null
  };
  if (queue.pending === null) {
    update.next = update;// Update the circular list
  } else {
    update.next = queue.pending.next;// The next of the new update points to the previous update
    queue.pending.next = update;// Next of the previous update points to the new update
  }
  queue.pending = update;/ / update the queue pending

  isMount = false;// mark the end of mount
  workInProgressHook = fiber.memoizedState;/ / update the workInProgressHook
  schedule();// Schedule updates
}

function App() {
  let [count, setCount] = Dispatcher.useState(1);
  let [age, setAge] = Dispatcher.useState(10);
  return (
    <>
      <p>Clicked {count} times</p>
      <button onClick={()= > setCount(() => count + 1)}> Add count</button>
      <p>Age is {age}</p>
      <button onClick={()= > setAge(() => age + 1)}> Add age</button>
    </>
  );
}

function schedule() {
  ReactDOM.render(<App />.document.querySelector("#root"));
}

schedule();
Copy the code