ginnko / learn-react-inner-workings

learn react inner workings

learn-react-inner-workings

v16.5.2

说明

为快速定位(下面两个链接用于方便找到文件链接)：

(./node_modules/react/cjs/react.development.js)

(./node_modules/react-dom/cjs/react-dom.development.js)

为调试：

把node_modules下的react和react-dom中的index.js执行文件都改为*.development.js

本仓库目的：

看了一段时间，目前想完全全面掌握React的设计方式不现实，React源码的学习是个长期的过程。

目前第一阶段的目标是：

1. 熟悉React主要功能的实现路径
2. 熟悉主要函数的功能
3. 理解React主要的设计思路
4. 帮助自己写React应用时写出简洁高效的代码

代码结构

核心功能概览。

1. React core：包含React的类定义和一些顶级API
2. Render：负责渲染vdom到终端
3. Reconciler：映射数据到UI

核心概念

1. 当调用ReactDOM.render()或是setState()时，会走reconsiliation过程，其结果就是React获悉了DOM节点树，然后react-dom应用在“一套最少的变化”来更新DOM节点。

2. reconciliation

见这里

代码分析

1. 首次渲染：见此处

帮助阅读源码的tips

1. 用于调试的打包方式：

yarn build core,dom –type=UMD

2. 在关键链路上打断点：

前端 View 层框架的声明周期钩子和 render 方法

3. 看github上的big-pictureissue

We always discuss such improvement proposals with the community. You can find some of those discussions by the “big picture” label on the React issue tracker.

参考资料

下面的资料除了第一篇都有讲渲染流程，不同作者重点讲的侧重点不同，真的是差的很大。

1. 深入理解React fiber(:star::star::star::star:)

   这个讲Fiber涉及的概念讲的很好，但是没有结合源码流程，对于第一次看的人来说，看到后面一头雾水。

2. React fiber架构(:star::star::star::star:)

   这个讲的很好，讲流程的时候，没有讲fiber对象的创建过程，reconciliation的过程使用setState为例讲的。

3. React源码全方位分析(:star::star::star:)

   这个有讲到fiber对象的创建过程，后面就差强人意了。

4. React源码速览(:star::star::star::star::star:)

   这个讲的非常好，啪啪啪，虽然有一部分的源码已经更新了，但依然掩盖不住作者的大神功底，逻辑很清楚，源码部分是以setState为例讲的。

5. How React Works(:star::star::star::star::star:)

   刚开始看这个，有关于首次渲染的说明，没细看，但感觉应该会不错。

   什么叫不错，简直就是救我狗命的秘籍啊!!!

6. A look inside React Fiber – how work will get done

   据说小说体写的，未看，不知详情。