[路飞]-mini-react 之构建fiber和渲染「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

react版本 18rc

读完本篇文章可以了解到：

如何初始化一个模拟react运行的项目
了解react如何构建 fiber
了解react原生标签如何渲染项目地址：github.com/coolara/min…

1. 首先初始化项目

// 可以从这个地址下载项目
git clone https://github.com/coolara/mini-react.git
// 这个项目每个分支都会有部分源码功能实现
cd mini-react
// 创建一个react项目,名字demo
yarn create @vitejs/app demo --template react


目录结构
-| mini-react
-- demo    react项目目录/源码测试代码
-- docs    说明文档目录
-- src     源码目录

2. demo配置

// 如果项目依赖是react18就不需要调整了
yarn add react@18rc react-dom@18rc

（1）在demo根目录创建一个which-react.js 用于验证自己的代码正确性

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

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

export {ReactDOM,React}

（2）简化一下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)

（3）yarn dev

看到上图。就说明准备工作就绪，开始源码的手写了。

本文的重点部分源码就不再这里展示了。

3. 构建fiber的函数

src下创建react-dom.js

工作开始的地方，这里主要是创建了一个ReactDOMRoot类，原型声明了一个render方法，这个主要是给wip赋值。让ReactFiberWorkLoop.js的performUnitOfWork()方法工作起来。

src下创建ReactFiber.js

fiber的结构如下

export function createFiber(vnode, returnFiber) {
  const fiber = {
      type: vnode.type,
      key: vnode.key,
      props: vnode.props,
      //原生标签 dom 
      // class组件 实例
      stateNode: null, 
      child: null,
      sibling: null,
      return: returnFiber,
      //标记fiber任务类型 插入 更新 删除

      flag: 'Placement',

      // 当前层级下标
      index: null
  }

  return fiber
}

4. 开始渲染工作

有了fiber结构之后就可以开始渲染了

src下创建ReactFiberWorkLoop.js

这个文件主要是根据fiber的数据结构，按照顺序依次处理自己-> child -> sibling -> return的sibling。react有一个自己的任务调度器决定了fiber处理的先后顺序，那么如何处理fiber呢？这个事情交给了ReactFiberReconciler.js

src下创建ReactFiberReconciler.js

这个文件主要是根据fiber的stateNode创建原生节点，然后根据props做属性更新根据children处理子节点。

src下额外的文件 utils.js

一些公共的辅助函数

处理完毕以上文件后就可以看到原生标签顺利的渲染出来了

预告：下一次是渲染函数组件和类组件

[路飞]-mini-react 之构建fiber和渲染