前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >阅读React源码初尝试

阅读React源码初尝试

作者头像
马克付
发布2022-12-12 16:47:37
4680
发布2022-12-12 16:47:37
举报
文章被收录于专栏:技术进阶系列

1

目的

The source of the interesting

PS: 这句话必须要写,读了一些源码我发现,他们也只是普通的代码,不过他们考虑到性能/扩展/维护/可读/间接/优秀的逻辑和设计模式,我们应学习这些,当然也不要怕他们是洪水猛兽

之前好像写给如何读源码的,不过那次是简单方法论,这次我们不仅重新总结一下方法,并且实践一下,简单读一读 React

2

方法论

Good methods

代码语言:javascript
复制
1.问题驱动, 比如 React setState如何起作用的,更新过程是怎样的,React fiber 到底神奇在哪里?如何提升性能的?
2.最新的源码,不仅是思维升级,还是可读性升级,学习成本  🆙 🆙
3.结构,项目有哪些组成部分,为了达到最终的产出,要经过哪几步流程。这些流程里,业界主流的方案有哪几种
4.本地 g clone xxx 拿下来  并且跑起来 ,为了更好的跑起来,找到类似这样的文件 **Contribution Guide** 这个文件会告诉你哪里可以进行预览你的更改
5.在自己想了解的地方 打## debugger && log 然后 想办法 打出自己的 log 
6.关注官网动态和核心开发者动态

Contribution Guide

结构更多解释来源于 蚂蚁团队 请放心参考

代码语言:javascript
复制
比如前端 View 层框架,要渲染出 UI,组件要经过 mount、 render 等等步骤。数据驱动的前端框架,
在 mounted 之后,就会进入一个循环,当用户交互触发组件数据变化时,会更新 UI。其中数据的检测方式
又有分 Push 和 Pull 两种方案。渲染 UI 可以是全量的字符串模板替换,也可以是基于 Virtual DOM 的
差量 DOM 更新。

又比如前端的一些工具,Webpack 和 Babel 这些工具都是基于插件的。基本的工作流程就是读取文件,
解析代码成 AST,调用插件去转换 AST,最后生成代码。要了解 Webpack 的原理,就要知道 Webpack 基于
一个叫 [tapable](https://link.zhihu.com/?target=https%3A//github.com/webpack/tapable) 的模块系统

项目结构 更多 解释 需要找到 package / src / bin / lib 下的 核心文件部分

React

Vue

Babel

3

实践 以 React setState 为例 看看发生了什么

What happened about setState

前提

React Core 包含了 React 的类定义和一些顶级 API。大部分的渲染和 View 层 diff 的逻辑都在 Reconciler 和 Renderer 中

请点击https://juejin.cn/post/7142397447095091213#heading-2查看 完整内容(纯属 不想再敲一遍)

The end

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-09-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 马克付 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档