This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

Why learn source code? Everyone has different opinions, it’s like driving a car, if you can only drive and not repair, then what do you do in the middle of the car? So if you want to use React well, you more or less have to know some React source code. After all, it is better to rely on yourself than on people! You have enough food and clothing!!

The content of this article is relatively simple, why? If I take the source code directly step by step analysis, many people will be confused, do not understand what to do, so simply stand a little higher, mainly about the two framework in the update state of the principle of comparison. If you first understand how status updates work, you won’t be struggling to read the source code.

React basic components

Here we have to understand what React is made up of. React is made up of the scheduler, the coordinator, and the renderer.

  1. Scheduler: The scheduler can be thought of as a control room. Each update is scheduled according to its priority. Higher-priority updates can interrupt lower-priority updates.

  2. Coordinator: The coordinator is the part of the often referred to Diff algorithm that generates workinProgressFibers by comparing currentFiber to JSX objects. It is then rendered by the renderer.

  3. Renderer: The renderer is easy to understand. The main function of the renderer is to render the generated workInProgressFiber to the page.

The basic running logic is that state updates are scheduled by the controller according to priority, high-priority updates can interrupt low-priority updates, and then Diff through the coordinator to generate workInProgressFiber, which is rendered by the renderer.

React status update

After the introduction of the basic composition and operation logic, now we enter the main topic, look at the state with the new specific do what things!

Basic code:

import React from "react"; const App = () => { const [num, setNum] = React.useState(1); const handleClickBut = () => { setNum((num) => num + 1); }; React.useEffect(() => {}, [num]); Return (<div> {num} <button onClick={handleClickBut}> add </button> </div>); };Copy the code

In this simple example, the user clicks the add button and calls setNum to trigger a status update.

Status Update Process

The main process is shown in the figure below:

Key step analysis

  1. DispatchAction –> basicStateReducer phase

    During this phase, a new undate object is created to form a circular list with the previous queue.pending. Then calculate the latest memoizedState based on the incoming action.

  2. ScheduleUpdateOnFiber – > performSyncWorkOnRoot | | performConcurrentWorkOnRoot phase

    In this phase, the main priority scheduling, the React according to create application patterns of different call different patterns of Diff method (performSyncWorkOnRoot | | performConcurrentWorkOnRoot) Diff logic, It’s just done differently before Diff. Don’t get it wrong

  3. RenderRootComcurrent | | renderRootSync – > commitRoot phase

    In this phase, React mainly Diff and generate workinProgressFibers by comparing currentFiber and JSX objects. It is then rendered by the renderer.

  4. CommitRoot –> commitLayoutEffects

    At this stage, Reac mainly renders the DOM and calls the life cycle.

Basic components of Vue

I don’t think I need to say much about the basic principles of Vue. The website makes it very clear!!

When the state changes, the set in object.defineProperty triggers, notifying the related dependencies, and Watcher triggers the corresponding component to update, so as to achieve the purpose of updating the view.

Vue status update

Basic code:

<template> <div> {{num}} <button @click="num++"> add </button> </div> </template> <script> export default {data() { return { num: 0, }; }}; </script>Copy the code

Click the button to trigger num plus 1Z, and the status change triggers the update process.

Status Update Process

The main process is shown in the figure:

Key step analysis

  1. ProxySetter –> dep.notify() phase

    At this stage, Vue mainly makes state changes and updates based on dependency notifications.

  2. Subs [I].update() –> watcher.run() phase

    At this stage, Vue mainly performs the process of updating the view component as Watcher listens for changes.

  3. updateComponent —> updated

    At this stage, Vue mainly Diff and renders the final DOM into the view. And calls the lifecycle function at the time of the update.

Past wonderful

  • What happens when React encounters a tree shuttle?

  • Top 10 Mistakes to avoid when using React

  • Guide to Optimizing WebPack Packaging

  • What does Vue do when dragging dynamically generated components?

  • JS Coding skills, most people do not!!

  • TypeScript doesn’t it smell good? Come now!