从0实现react框架，React Fiber架构和Fiber Diff算法

react框架是目前最为流行的前端框架之一，尤其在很多大厂，应用更为广泛。相对于一些mvvm框架，react上手需要一定的技术基础，但掌握后，编码体验和性能是很不错的。react整体思想是函数式编程，可以很大程度上减少代码重复，易于并发编程，react内部实现了一套调度机制，给不同执行任务划分优先级，从高到低循环渲染（Fiber），同时引入一套Fiber Diff算法，最大限度的使网页平滑，性能最优。

react的源码在不断的迭代后，相对不那么好理解，那么怎么才能快速理解并掌握react底层运行原理呢，近期给员工作培训，基于react源码思想，设计和实现了一个简版react，本文将逐层深入，从0实现一个简版react，包括Fiber结构，Fiber Diff算法，useState hooks实现。

更多内容关注公众号：前端361

概述

1，实现基础版react

2，fiber数据结构实现

3，fiber diff算法实现

4，useState实现

一，实现基础版react

先看一段react代码

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

const container = document.getElementById("roo