react 源码分析

笔者最近开撸了react源码,自己为自己做个记录,同时希望能帮到其他同学。

从个人的视角来看,react大致分为以下几个部分:

1.    react其实没啥,都是透传到react-dom上,前提是我看的是react-dom, 不是react-native.

2.    react-dom几大部分:

      1.    事件部分,针对原生事件做了封装、分类.

            a.  优先级分类: disCreateEvent,  UserBlockingEvent, ContinuousEvent。

             b.  捕获,冒泡分类: trapCapturedEventtrapBubbledEvent

             c.  代理事件(代理到document上),原生事件(无法代理到document上)

      2.    fiber架构,替代了以往的虚拟dom, 采用链表形式存储dom结构

            FiberRootNode,   FiberNode,  createFiberFrom.....

      3.    生命周期、钩子函数部分

             useState, useReducer, useTransition.....

       4.    函数组件, class组件分别处理

3.    Scheduler部分,用来做调度的, 就是网上经常看到的时间分片,优先级调度

       1.  和react-dom之间优先级形成一一对应, 并且能互相转换

           ImmediatePriority,  UserBlockingPriority,  NormalPriority,  LowPriority,  IdlePriority.

       2.  所谓时间切片,其实就是利用了异步操作原理。同步执行一些任务,时间片到期,就换异步执行。

 

posted @ 2020-10-14 11:29  潴哥  阅读(181)  评论(0编辑  收藏  举报