MINI-REACT

Summary

• 简易版React
• 实现核心API: createElement、render、useState
• 理解fiber树的更新过程
• 使用requestIdleCallback作为scheduler进行任务调度
• 实现简易diff
• 实现简易hooks

Test

npm i
npm start

fiber tree

     +---------+
     |  root   |
     +-+----+--+
       |    ^
 child |    |
       v    |
     +-+----+--+
     |  node   |
     +-+-------+
       |    ^-------------+return
 child |                  |
       v                  |
     +-+-------+      +---+-----+
     |  node   +----->+  node   |
     +-+-------+      +---------+
       |    ^----------------------------+return
child  |                                 |
       v                                 |
     +-+-------+      +---------+     +--+------+
     |  node   +----->+  node   +---->+  node   |
     +---------+      +---------+     +---------+

               sibling           sibling

fiber树不是一颗严格的n叉树，每个fiber结点有三个重要的指针: return、child、sibling， 对fiber树的遍历采用dfs算法。