Need help with ReactNote?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

BUPTlhuanyu
166 Stars 26 Forks GNU General Public License v3.0 239 Commits 1 Opened issues

Description

React相关库的源码分析

Services available

!
?

Need anything else?

Contributors list

# 260,921
Front e...
TypeScr...
React
wechat
219 commits

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

react核心流程图 高清大图: - 永久地址: 链接:https://pan.baidu.com/s/1EfTWzqC4psW8kq5kYP-v9A 密码:8nqr

读源码大致总结了一下几个阶段,也是为什么我需要总结这样的一个流程图,

流程图把握整体,文章深入细节
: 1. 通过文字的形式记录,逻辑理清楚了,能说明白就很不容易了;但是从文字上很难把握全局,后期回顾的时候比较慢,查 bug 原因会有不少阻力。 2. 通过流程图的形式记录,鸟瞰整体,能清楚各个模块功能,后期回顾的时候比较快,查 bug 原因相对轻松。

流程图中也总结了一些 react 中比较常用的概念以及一些很容易误解的地方,比如 - setState 何时何地是同步或者异步,原因是什么(是否空闲,是否是concurrent模式,处于react什么阶段决定了其到期时间,也就决定了是异步还是同步)? - 常说绑定事件函数在构造函数里 bind,props的属性不要传字面量对象,这些措施一定就有效?什么场景有效(结合 shouldComponentDidUpdate,pureComponent,还有一些入参是 nextProps的手动比较的地方,这些都应该考虑在内)?

PS: 推荐一下 react status,这个周刊会一直推送给你最新的react进展与相关的代码库。

非常希望大家能和我一起讨论,不管是react源码还是react status中有趣的文章,欢迎在issue中留言。如果感兴趣,可以点个star关注一下这个仓库的更新。

更多文章敬请关注公众号:

wx

ToDo 深入分析

  • [ ] react
    • [x] shared 整个项目通用代码
    • [x] react 核心代码,react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
    • [x] react-is 梳理react框架中两大类型:ReactElement以及Portal类型。梳理React.memo,Ref等类型的构建成ReactElementd的过程
    • [x] scheduler 规划 React 初始化,更新等等
    • [x] react-reconciler React调度器
    • [x] events 合成事件系统
      • [x] 事件注册触发
      • [x] 为什么需要合成事件,为什么需要有自己单独的事件机制:事件委托,事件兼容处理,可控的调度更新任务。
      • [x] 如何封装可扩展的 SyntheticEvent 对象
      • [x] event.persist() 的原理:由于事件触发比较频繁导致生成的合成事件对象的数量也非常大,react 为了节约内存,构建了一个容量为 10 的事件池,在每次事件处理函数同步代码执行完毕之后,会重置这个合成事件,然后将这个空的合成事件对象存到事件池中,下次生成合成事件的时候再取出来设置一些属性。因此当你的事件处理函数涉及到异步的时候,事件处理函数返回,此时合成事件对象被重置,你异步代码中就无法访问到的正确的值,因此event.persistent()就是为了解决这样的问题,这个函数调用之后会给合成事件对象标记为isPersist,后续也就不会 release 这个合成事件,release 会重置合成事件的属性值(包括target指向的原生事件对象),然后将空的合成事件对象添加到池中的空余位置。
    • [x] react的错误处理机制
      • [x] 从invokeGuardedCallbackAndCatchFirstError,invokeGuardedCallback,invokeGuardedCallbackImpl看是如何对错误进行处理的
      • [ ] ...
    • [x] react-dom DOM渲染
    • [ ] 各类型组件的运行机制
    • [ ] 专题
  • [x] react-router4各个API的使用与源码分析
  • [ ] react-transition-group
    • [x] 基本组件:Transition组件分析,结合生命周期详细分析该组件实现动画的原理
    • [x] ~~TransitionGroup组件:对children中Transition或者CSSTransition组件的动画的管理~~
  • [ ] ~~redux-saga:管理react副作用,尽可能使组件为纯函数~~

📖react16.6

源码实例分析:可见runlogic文件夹下的代码,断点分析(console.log不是一快照的方式打印结果,对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制
🍺D1 项目目录
🍺D2 shared
🍺D3 react
🍺D4 react-is
梳理react中的类型,两大类型的构建过程
🍺D5 scheduler
scheduler调度器原理,大致基本流程已给出图示,以后再给出更详细具体的调度解析,其实知道了设计思想,往后的内容都基本没问题了。
tracing及其TracingSubscriptions实现的是一个订阅监听者设计模式,暂时不对其总结
🍺D6 react-reconciler
react-reconciler源码分析,直接记在我的有道云笔记中,之后会整理成md文件
🍺D7 events
react事件系统是一个非常值得深入分析的部分,猜想跨平台开发框架对不同平台的事件的兼容方案莫过于此吧
🍺D8 错误处理机制

📖react-router

🍺D1

📖react-transition-group

🍺D1

📖表单

🍺react-hook-form

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.