kx00012kx / reactnote

React相关库的源码分析

🔥🔥🔥对react相关代码库以及框架的源码进行了一定的分析

react核心流程图 高清大图：

• 在线链接: http://note.youdao.com/noteshare?id=cd7d8aa028e19e78dda0cec4cdc39384
• 永久地址： https://github.com/BUPTlhuanyu/ReactNote/tree/master/react/ReactDOM_render.png

这个源码阅读计划是从毕业的前几个月开始的，花了将近一个月的时间逐行阅读到react调度更新部分之后，虽然有所收获， 但是还有很多地方有点不理解与模糊，并没有带着问题阅读源码，因此就停下来了。

最近把官网的hook文章都仔细过了一遍，也仔细研究了前端精读公众号上所有关于hook的文章，并且用hook写了一个表单组件库，感受到了react的牛逼之处，最近这几天通过react status这个订阅号，发现目前一个新的表单库，用hook写的，叫做react-hook-form，只能说文档是非常完善的，等我把源码研究透彻之后，可能会放到这个仓库，稍微提一下，这个库的特点是：自动或者手动收集表单组件的字段并整合到一个对象里，非常不可思议的是不用useState来保存字段状态以及更新状态渲染组件，所有的字段都被存放在useRef中，然后利用一个useState返回的set进行手动强制渲染，因此减少了很多的重新渲染的操作。

另一个有意思的事情是，之前看react源码，中间多次出现concurrent这个模式，一直没明白同步到底是干啥，现在react16.11.1版本的已经给出了文档，不过这个模式还是一个试验性的功能，该功能能够打断渲染，这个渲染不是说浏览器的渲染，而是react的调度阶段的一些操作。

总之，是时候把之前的源码捡起来，好好梳理总结一下。在这个过程中，我也会结合当前慕课网上的react源码解析教程来对原来写下来的文章进行总结与梳理，希望能够有更深的理解。

PS： 真心给react粉丝们一个非常好的订阅号，react status，这个周刊会一直推送给你最新的react进展与相关的代码库。 非常希望大家能和我一起讨论，不管是react源码还是react status中有趣的文章，欢迎在issue中留言。等react源码总结完了，我也会陆陆续续在issue中发一些关于react的文章的读书笔记与实践的思考。如果感兴趣，可以点个star关注一下这个仓库的更新。

ToDo 深入分析

• react
  • shared 整个项目通用代码
  • react 核心代码，react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
  • react-is 梳理react框架中两大类型：ReactElement以及Portal类型。梳理React.memo，Ref等类型的构建成ReactElementd的过程
  • scheduler 规划 React 初始化，更新等等
  • react-reconciler React调度器
    • 到期时间是如何确定的
    • context的实现机制
    • ...
  • events 合成事件系统
  • react的错误处理机制
    • 从invokeGuardedCallbackAndCatchFirstError，invokeGuardedCallback，invokeGuardedCallbackImpl看是如何对错误进行处理的
    • ...
  • react-dom DOM渲染
  • 各类型组件的运行机制
  • 总结
• react-router4各个API的使用与源码分析
• react-transition-group
  • 基本组件：Transition组件分析，结合生命周期详细分析该组件实现动画的原理
  • TransitionGroup组件：对children中Transition或者CSSTransition组件的动画的管理
• redux-saga：管理react副作用，尽可能使组件为纯函数

📖react16.6

源码实例分析：可见runlogic文件夹下的代码，断点分析(console.log不是一快照的方式打印结果，对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制

🍺D1 项目目录

• 1、react源码浅析(一)：项目目录

🍺D2 shared

• 1、react源码浅析(二)：shared文件夹
• 2、react源码浅析(二)：shared文件夹之ReactTreeTraversal

🍺D3 react

• 1、react源码浅析(三)：react文件夹-源码入口
• 2、react源码浅析(三)：ReactNoopUpdateQueue
• 3、react源码浅析(三)：ReactBaseClasses
• 4、react源码浅析(三)：Ref-Context-Lazy-forwardRef-memo
• 5、react源码浅析(三)：ReactElement
• 6、react源码浅析(三)：ReactDebugCurrentFrame
• 7、react源码浅析(三)：ReactChildren
• 8、react源码浅析(三)：Hook
• 9、react源码浅析(三)：ReactElementValidator

🍺D4 react-is

梳理react中的类型，两大类型的构建过程

• react源码浅析(四)：react-is

🍺D5 scheduler

scheduler调度器原理，大致基本流程已给出图示，以后再给出更详细具体的调度解析，其实知道了设计**，往后的内容都基本没问题了。

tracing及其TracingSubscriptions实现的是一个订阅监听者设计模式，暂时不对其总结

• react源码浅析(五)：scheduler
• react源码浅析(五)：scheduler之Tracing.js
• react源码浅析(五)：scheduler之TracingSubscriptions.js

🍺D6 react-reconciler

react-reconciler源码分析，直接记在我的有道云笔记中，之后会整理成md文件

• 1、react源码浅析(六)：react的fiber树与页面节点树的关系
• 2-0、react源码浅析(六)：ReactDOM.render流程概览
• 2-1、react源码浅析(六)：创建container对应的root
• 2-2、react源码浅析(六)：创建root下的fiber树并开始初始调度
• 3-1、react源码浅析(六)：调度入口函数scheduleWork
• 3-2、react源码浅析(六)：performAsyncWork与performSyncWork
• 3-3、react源码浅析(六)：performWork调度root双向循环链表
• 3-4、react源码浅析(六)：performWorkOnRoot调度某个root的fiber树
• 3-6-0、react源码浅析(六)：root渲染阶段renderRoot
• 3-6-1、react源码浅析(六)：对root执行updateHostRoot
• 3-6-2、react源码浅析(六)：对类组件执行updateClassComponent
• 3-6-last、react源码浅析(六)：completeUnitOfWork完成当前节点的调度
• 3-7-0、react源码浅析(六)：root提交阶段completeRoot
• 3-7-1、react源码浅析(六)：提交阶段执行getSnapshotBeforeUpdate生命周期函数
• 3-7-2、react源码浅析(六)：提交HostComponent原生HTML标签上的effect
• 3-7-3、react源码浅析(六)：最后提交阶段，执行剩余生命周期钩子
• 3-8-1、react源码浅析(六)：多次执行setState的更新机制
• 3-8-2、react源码浅析(六)：到期时间的计算规则

🍺D7 events

react事件系统是一个非常值得深入分析的部分,猜想跨平台开发框架对不同平台的事件的兼容方案莫过于此吧

• 事件绑定
• 事件触发

🍺D8 错误处理机制

• react中的错误处理

📖react-router

🍺D1

• react-router4源码浅析总结
• react-router4源码浅析(一) ：matchPath
• react-router4源码浅析(二) ：Route
• react-router4源码浅析(三) ：BrowserRouter&&HashRouter
• react-router4源码浅析(四) ：Router
• react-router4源码浅析(五) ：generatePath
• react-router4源码浅析(六) ：Redirect
• react-router4源码浅析(七) ：Switch
• react-router4源码浅析(八) ：withRouter
• react-router4源码浅析(九) ：Link

📖react-transition-group

🍺D1

• react-transition-group源码浅析(一)：Transition

📖表单

🍺react-hook-form

• react-hook-form官方文档
• utils
• 源码梳理