1
目的
The source of the interesting
PS: 这句话必须要写,读了一些源码我发现,他们也只是普通的代码,不过他们考虑到性能/扩展/维护/可读/间接/优秀的逻辑和设计模式,我们应学习这些,当然也不要怕他们是洪水猛兽
之前好像写给如何读源码的,不过那次是简单方法论,这次我们不仅重新总结一下方法,并且实践一下,简单读一读 React
2
方法论
Good methods
1.问题驱动, 比如 React setState如何起作用的,更新过程是怎样的,React fiber 到底神奇在哪里?如何提升性能的?
2.最新的源码,不仅是思维升级,还是可读性升级,学习成本 🆙 🆙
3.结构,项目有哪些组成部分,为了达到最终的产出,要经过哪几步流程。这些流程里,业界主流的方案有哪几种
4.本地 g clone xxx 拿下来 并且跑起来 ,为了更好的跑起来,找到类似这样的文件 **Contribution Guide** 这个文件会告诉你哪里可以进行预览你的更改
5.在自己想了解的地方 打## debugger && log 然后 想办法 打出自己的 log
6.关注官网动态和核心开发者动态
Contribution Guide
结构更多解释来源于 蚂蚁团队 请放心参考
比如前端 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