1.我又不写框架我为什么要学源码？

帮助你理解代码是如何运行的
遇见bug时候从底层思考解决问题
有助于提升编码能力（全世界最好的前端前端开发的框架）
学习编码思维

2.react简介

是纯粹的UI=Fn()
setState（变UI)
一切基于组件
思想超前的框架
react16更新了重写了核心代码，但是用户是完全无感知的，不像angular更新了用户还要调整兼容
react16引入Fiber：解决了js单线程运行，如果计算量太大的话导致动画卡针和卡顿的问题（业界领先，其他框架估计也会陆续跟进）

3.react源码解析课程内容

React API：react API和各个API的作用
- createElement
- createContext
- JSX=>JS
- ConcurrentMode
- Ref
- Component
- Suspense
- Hooks
React中的更新创建：react中的更新创建API及API中间做了什么
- ReactDOM.render
- Fiber
- UpdataQueue
- FiberRoot
- Update
- expirationTime
- React.Children.map实现流程
Fiber Scheduler：react穿件更新完调度情况
- scheduleWork
- batchedUpdates
- performWork
- performUnitOfWork
- requestWork
- react sheduler
- renderRoot
- Fiber Scheduler调度过程
开始更新：react中各种不同的组件是如何进行更新的：开始更新 10几种
- beginWork以及优化
- 各类组件的更新过程
- 调和子节点的过程
- 遍历Fiber树更新节点流程
完成各个节点的更新：每一个组件更新完成之后我们要对他进行的一些操作
- completeUnitOfWork
- completeWork
- unwindWork
- 虚拟DOM对比
- 错误捕获处理
- 完成整棵树更新
提交更新：调度过程、更新过程计算出来的新的dom结构交到真的dom树当中来完成一个UI的更新过程
- commitRoot整体流程
- 提交快照
- 提交DOM更新
- 提交所有的声明周期
- 开发时的帮助方法
- 提交DOM插入
- 提交DOM删除
各种功能的实现过程：穿插再前面几个章节代码都会涉及到的
- context的实现过程
- ref的实现过程
- hydrate的实现过程
- React的事件体系
Suspense：react大版本以后都会围绕他更新的一个非常超前的理念，他能够颠覆很多react的开发体验
- 更新优先级的概念
- 更新挂起的概念
- Suspense组件更新
- timeout处理
- retry重新尝试渲染
- lazy组件更新
Hooks：让我们摆脱了classComponent的繁琐的内容
- 核心原理
- useState
- useEffect
- useContext
- 其他Hooks API
React的源码实现：最后==重点==
- ==Fiber==
- ==Update==
- ==Scheduler==

4.想要学好React源码需要有

足够的耐心
思考再思考
善于提问和笔记

目的

外在

提高开发能力
解决问题能力
提升自身价值

内在

提升学习能力
提升思考能力
提升设计能力

适合人群

想要参与开源项目
想要成为高级开发者或者架构师

准备

下载源码及了解源码目录结构
固定了同一个版本的源码
地址：git@igit.58corp.com:xxzl-fe/reactSource.git

packages:包含react的模块

- events：：事件系统 自己实现了事件体系
- reacr：通过npm全装的react的核心代码都在这个里面
- react-dom:就是安装时候的那个react-dom包
- react-reconciler：被其他包重度依赖的包，会在react-dom、react-native里面也会有用到，相对于独立的比较有公共的源码
- scheduler：将来会单独发成一个npm的包，react16之后非常核心的一块内容，叫做调度，实现了react tinkModel 异步渲染的这种方式，
- shared：比较公用的代码

其他的包有的是测试相关的，有的事其他平台相关的，我们就不怎么关心了

react和react-daom的关系：

import react 但是没有用到react.什么的属性的，那为什么还要import react呢？

因为JSX是和react非常相关的，JsX转换成js会变成什么样子，react源码非常少，每个文件都不到100行代码，但是react和react-dom压缩完都有100k，大部分源码都在react-dom里面， react本身是个定义节点和表现行为的，具体我们如何在dom上去渲染去更新，后期会发现大部分的代码都在react-dom里面的深入理解react react-dom 产物怎么用在react-dom上面的

react源码解析（一）