“This is the second day of my participation in the First Challenge 2022.

reactversion18rc

After reading this article, you can learn:

  • How do I initialize a simulationreactRunning projects
  • To understandreactHow to buildfiber
  • To understandreactHow do native tags render

Project address: github.com/coolara/min…

1. Initialize the project first

// The project can be downloaded from this address
git clone https://github.com/coolara/mini-react.git
// Each branch of the project will have some source code functions implemented
cd mini-react
// Create a React project named demoYarn create @ vitejs/app demo - template react directory structure - | mini - react - demo react project directory/source test code - docs documentation - SRC the source directoryCopy the code

2. The demo configuration

// If the project depends on React18, no adjustment is required
yarn add react@18rc react-dom@18rc
Copy the code

(1) Create a react-js file in the demo root directory to verify that your code is correct

import {React, useReducer } from "react";
import ReactDOM from 'react-dom'

// import {React} from '.. /src/react'
// import {ReactDOM} from '.. /src/react-dom'

export {ReactDOM,React}

Copy the code

(2) Simplify main.jsx


import './index.css'
import {ReactDOM} from '.. /which-react'
const jsx =  (
  <div className='border'>
    <h1>mini-react</h1>
    <p>hello react</p>
  </div>
)
ReactDOM.createRoot(document.getElementById('root')).render(jsx)

Copy the code

(3) YARN Dev

See the picture above. It shows that the preparation is ready to begin the source code handwritten.

The main source code for this article is not shown here.

3. Construct fiber’s function

SRC to create react-dom.js

The work begins with the creation of a ReactDOMRoot class, and the prototype declares a Render method, which assigns a value to the WIP. Make the performUnitOfWork() method of ReactFiberWorkLoop.js work.

SRC create reactFiber.js

The structure of fiber is as follows

export function createFiber(vnode, returnFiber) {
  const fiber = {
      type: vnode.type,
      key: vnode.key,
      props: vnode.props,
      // Native tag DOM
      // Class component instance
      stateNode: null.child: null.sibling: null.return: returnFiber,
      // mark fiber task type insert update delete

      flag: 'Placement'.// Current level subscript
      index: null
  }

  return fiber
}

Copy the code

4. Start rendering

Once you have the Fiber structure in place, you can start rendering

SRC create reactFiberWorkloop.js

This file handles its own -> child -> Sibling -> return sibling sequentially according to fiber’s data structure. React has its own task scheduler that determines how fiber is processed first and then second. The matter was handed over to ReactFiberReconciler.js

SRC to create reactFiberReconciler.js

This file is used to create native nodes based on fiber’s stateNode, and then to update properties based on props and children.

SRC additional file utils.js

Some common helper functions

After the above files are processed, you can see that the native tags render smoothly

Preview: Next up are render function components and class components