simple-react

KO | EN

gitlite — search

#python #react #typescript #golang #rust #deep-learning #linux #docker #windows #awesome #cli #kubernetes #vue #security

(★ 179)

this is a simple react framework

simple-react Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Simple React

##### 简介 : 简化版的react,  虽然不能真的用在项目里, 但是可以作为React源码的阅读笔记看~求各位大佬给星星!感激不尽~
##### 已完成 : fiber架构, setState, 事件代理, ContextAPI, RefAPI, useState

##### 正在进行 : Concurrent异步渲染(渣方法实现了个渣版本 正在完善中...)

##### 跑起来 : 根目录下执行 webpack-dev-server

##### 带注释的源码放在procedure目录下了

# 源码阅读笔记
&emsp;[点这里](./procedure/源码阅读) 
&emsp;许久没更新了, 加两个知乎回答链接~
&emsp;[如何用hooks实现class组件this.setState的callback](https://www.zhihu.com/question/364261651/answer/980288681) 
&emsp;[react源码中, reactRoot, fiberRoot, rootFiber的关系](https://www.zhihu.com/question/361787198/answer/942841740)

# React渲染流程
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;React16对于React15多了一个新的Fiber架构, 每次对比也都是对比的Fiber数据结构。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当调用ReactDOM.render时，首先React会在内部创建出一个Root对象，Root对象是整个React应用的根儿。每次React开始调度，不管是初次渲染还是setState都是从这个Root根儿上开始的。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创建好了Root后还会同时创建一个未初始化的Fiber对象，也就是uninitialFiber对象。其实每次React更新都是要对比新旧的Fiber，初次渲染的时候也是要对比新旧Fiber的，但是又因为初次渲染时根本没有上一次的Fiber，所以React才会在一开始就自己创建出一个未初始化也就是啥状态都没有uninitialFiber来假装有上一次的状态，之后才会为本次渲染真正创建一个属于初次渲染的RootFiber，之后用这个RootFiber和刚才那个uninitialFiber作对比。到这儿为止都是React自己干的事儿，和我们用React的人传进来的参数一点关系都没有。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当Root和uninitialFiber以及RootFiber都创建好了，才会真正开始初次的渲染。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开始渲染后，会从ReactDOM.render传进去的第一个组件开始循环调度，为根组件下以及根组件等每一个节点不管是原生dom节点，还是函数组件或是类组件甚至React内部提供的组件都创建一个自己对应的fiber对象，在这个过程中所创建的fiber，叫做workInProgress。每个workInProgress都连接着一个保存着当前节点跟新前状态的fiber，这个前一个状态的fiber叫做current。不过由于是初次渲染，所以只有RootFiber有current也就是uninitialFiber，剩下的所有节点的current都是null。

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这个循环创建(或更新)fiber的过程叫做render阶段，当render阶段结束说明所有的子节点都有了对应的fiber，形成了一颗fiber树，然后就可以进入提交阶段，也就是commit阶段。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;commit阶段会去RootFiber上找产生了更新的fiber，然后一个个地去根据对应的标识去更新。那么RootFiber上的fiber是哪儿来的呢~其实是在render阶段做的。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因为循环创建workInProgress的过程是一个深度优先的过程，所以会优先给传进来的react元素的一侧创建workInProgress，一侧创建完了再找他的父节点，才去给父节点以及父节点的兄弟节点去创建fiber。而当某一侧的子节点都创建好了之后，会有一个循环来判断刚刚创建好的这个一侧的节点，哪个节点上有更新，对于有更新的节点会被记录到父节点上，这样一层一层地往父节点上记录有更新的子节点，最终就会将全部有更新的节点挂到RootFiber上，形成一条链表。所以在commit阶段就根据这条链表进行对应的增删改的操作。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这样就完成了初次渲染。之后再执行setState(同步)的话流程基本上差不多，只不过上一轮中创建的RootFiber所领头的那颗workInProgress树则变成了current树，也就是保存着旧状态的fiber树。setState后会重新为本次的更新创建(或复用)新的fiber，也就是新的workInProgress。

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setState时同样会在render阶段找出哪个节点有更新然后挂到父节点上，最终把全部更新挂到RootFiber上。最后commit阶段挨个儿进行更新。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以上setState只是在同步状态下。使用了Concurrent组件会开启异步模式，中间render过程会有点不一样。同步状态下render阶段会一把梭，异步模式，就回头再说吧。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知道了React的整体渲染更新流程，再看那些乱七八糟的函数就好看多了~

# React函数调用流程
&emsp;&emsp;
因为react这个库本身没做啥事儿，就是把JSX肝成React元素之类的(就是那个有$$typeof的就是react元素)，主要做事儿的都是react-dom做的，所以就只写一些react-dom的方法。 
ReactDOM.render(调用关系基本是按照缩进来的) 
&emsp;[legacyRenderSubtreeIntoContainer](./procedure/legacyRenderSubtreeIntoContainer) 
&emsp;[updateContainer](./procedure/updateContainer) 
&emsp;&emsp;[requestCurrentTime](./procedure/requestCurrentTime) 
&emsp;&emsp;[computeExpirationForFiber](./procedure/computeExpirationForFiber) 
&emsp;[scheduleRootUpdate](./procedure/scheduleRootUpdate) 
&emsp;&emsp;[enqueueUpdate](./procedure/enqueueUpdate) 
&emsp;&emsp;[scheduleWork](./procedure/scheduleWork) 
&emsp;&emsp;&emsp;[scheduleWorkToRoot](./procedur/scheduleWorkToRoot) 
&emsp;&emsp;&emsp;[markPendingPriorityLevel](./procedure/markPendingPriorityLevel) 
&emsp;&emsp;&emsp;[requestWork](./procedure/requestWork) 
&emsp;&emsp;&emsp;&emsp;[addRootToSchedule](./procedure/addRootToSchedule) 
&emsp;&emsp;&emsp;&emsp;[performSyncWork](./procedure/performSyncWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;[performWork](./procedure/performWork)(也会走到下面那个performWorkOnRoot中) 
&emsp;&emsp;&emsp;&emsp;[scheduleCallbackWithExpirationTime](./procedure/scheduleCallbackWithExpirationTime)(未完成) 
&emsp;&emsp;&emsp;&emsp;[performWorkOnRoot](./procedure/performWorkOnRoot) 
&emsp;&emsp;&emsp;&emsp;&emsp;[renderRoot](./procedure/renderRoot) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[createWorkInProgress](./procedure/createWorkInProgress) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[createFiber](./procedure/createFiber) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[workLoop](./procedure/render/workLoop) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[performUnitOfWork](./procedure/performUnitOfWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[beginWork](./procedure/beginWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[bailoutOnAlreadyFinishedWork](./procedure/bailoutOnAlreadyFinishedWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[createWorkInProgress](./procedure/createWorkInProgress) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[mountIndeterminateComponent](./procedure//mountIndeterminateComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateHostRoot](./procedure/updateHostRoot) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[processUpdateQueue](./procedure/processUpdateQueue) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateFunctionComponent](./procedure/updateFunctionComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[prepareToUseHooks](./procedure/prepareToUseHooks) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[finishHooks](./procedure/finishHooks)
 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateClassComponent](./procedure/updateClassComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[resolveDefaultProps](./procedure/resolveDefaultProps) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[constructorClassInstance](./procedure/constructorClassInstance) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[adoptClassInstance](./procedure/adoptClassInstance) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[mountClassInstance](./procedure/mountClassInstance) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[processUpdateQueue](./procedure/processUpdateQueue) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[ensureWorkInProgressQueueIsAClone](./procedure/processUpdateQueue/ensureWorkInProgressQueueIsAClone) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[getStateFromUpdate](./procedure/getStateFromUpdate) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[applyDerivedStateFromProps](./procedure/applyDerivedStateFromProps) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateClassInstance](./procedure/updateClassInstance) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[finishClassComponent](./procedure/finishClassComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateHostComponent](./procedure/updateHostComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateHostText](./procedure/updateHostText) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateContextProvider](./procedure/updateContextProvider) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[updateContextConsumer](./procedure/updateContextConsumer) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[reconcileChildren](./procedure/reconcileChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[completeUnitOfWork](./procedure/completeUnitOfWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[completeWork](./procedure/completeWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[createInstance](./procedure/createInstance) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[appendAllChildren](./procedure/appendAllChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[finalizeInitialChildren](./procedure/finalizeInitialChildren) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[ensureListeningTo](./procedure/ensureListeningTo) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[diffAndUpdateHostComponent](./procedure/diffAndUpdateHostComponent) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[prepareUpdate](./procedure/prepareUpdate) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[diffProperties](./procedure/diffProperties) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
[resetChildExpirationTime](./procedure/resetChildExpirationTime) 
&emsp;&emsp;&emsp;&emsp;&emsp;[completeRoot](./procedure/completeRoot) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitRoot](./procedure/commitRoot) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitBeforeMutationLifecycles](./procedure/commitBeforeMutationLifecycles) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitPlacement](./procedure/commitPlacement) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitWork](./procedure/commitWork) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitDeletion](./procedure/commitDeletion) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[detachFiber](./procedure/detachFiber) 
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;[commitAllLifeCycles](./procedure/commitAllLifeCycles) 
 
 
setState(同步) 
&emsp;[enqueueSetState](./procedure/enqueueSetState)
 
&emsp;&emsp;[requestCurrentTime](./procedure/requestCurrentTime)
 
&emsp;&emsp;[computeExpirationForFiber](./procedure/computeExpirationForFiber)
 
&emsp;&emsp;[createUpdate](./procedure/createUpdate)
 
&emsp;&emsp;[enqueueUpdate](./procedure/enqueueUpdate)
 
&emsp;&emsp;[scheduleWork](./procedure/scheduleWork)
 
&emsp;&emsp;&emsp;scheduleWorkToRoot
 
&emsp;&emsp;&emsp;(然后接下来的调用关系就跟上有基本一致了) 
&emsp;&emsp;&emsp;这个是同步的方式 异步走的其实也是这个流程 
&emsp;&emsp;&emsp;不过就是在计算时间的那里会计算出一个非Sync的时间 
&emsp;&emsp;&emsp;之后进行到requestWork的时候就走scheduleCallbackWithExpirationTime了 
 
 
setState(异步) 
&emsp;更新中
 
&emsp;[关于Concurrent模式下如何计算优先级](./procedure/computeExpirationTime)
 
&emsp;Concurrent组件主要通过打断workLoop的nextUnitOfWork实现的 
&emsp;高版本浏览器有个叫requestIdleCallback的API可以在浏览器空闲的时候执行任务
 
&emsp;也就是说可以用requestIdleCallback在浏览器空闲时去执行workLoop中的performUnitOfWork
 
&emsp;但是requestIdleCallback这玩意不好使, 执行频率太低了(也可能是我用错方法了 o(╥﹏╥)o )
 
&emsp;所以react中自己用requestAnimationFrame模拟实现了一个兼容性好并且比较能稳定执行的方法
 
&emsp;这个实现有点复杂, 现在还没太研究明白 (╬￣皿￣) 所以暂时先用requestIdleCallback简单实现一个
 
&emsp;目前好像有bug ((٩(//̀Д/́/)۶)) 之后慢慢完善吧...
 
 
Hooks
 
&emsp;[useState](./procedure/useState)
 
&emsp;&emsp;[useReducer](./procedure/useReducer)
 
&emsp;[useReducer](./procedure/useReducer)
 
&emsp;&emsp;[createWorkInProgressHook](./procedure/createWorkInProgressHook)
 
&emsp;&emsp;&emsp;[cloneHook](./procedure/cloneHook)
 
&emsp;&emsp;&emsp;[createHook](./procedure/createHook)
 
&emsp;&emsp;[dispatchAction](./procedure/dispatchAction)
 
&emsp;&emsp;&emsp;[requestCurrentTime](./procedure/requestCurrentTime)
 
&emsp;&emsp;&emsp;[computeExpirationForFiber](./procedure/computeExpirationForFiber)
 
&emsp;&emsp;&emsp;[scheduleWork](./procedure/scheduleWork)
 
&emsp;[其他Hooks](./procedure/Hooks)
 
 
 
 
其他各种API以后会慢慢更新的，如果哪儿说的有啥问题的话请告诉我。顺便请各位大佬随手点个星星!小弟不胜感激~

simple-react

simple-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

simple-react

simple-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README