React 解析(1) - API

React 的特色

• React 是纯粹的框架

UI = fn(x)

只能使用setState，没有双向数据绑定

• 思想超强，React16重写了底层但一点都不影响上层代码

• Fiber: 改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务，释放浏览器主线程。

React API

• createElement
• createContext
• JSX => JS
• ConcurrentMode
• Ref
• Component
• Suspense
• Hooks

React中的更新创建

• ReactDOM.render
• Fiber
• UpdateQueue
• FiberRoot
• Update
• expirationTime

React Scheduler（调度）

• scheduleWork
• batchedUpdates
• performWork
• performUnitOfWork
• requestWork
• react scheduler
• renderRoot

开始更新

• beginWork以及优化
• 各类组件的更新过程
• 调和子节点的过程

完成各个节点的更新

• completeUnitOfWork
• completeWork
• unwindWork
• 虚拟DOM对比
• 错误捕获处理
• 完成整棵树更新

提交更新

• commitRoot整体流程
• 开发时的帮助方法
• 提交快照
• 提交DOM插入
• 提交DOM更新
• 提交DOM删除
• 提交所有声明周期

各种功能的实现过程

• context的实现过程
• ref的实现过程
• hydrate的实现过程
• React的事件体系

Suspense

• 更新优先级的概念
• Suspense组件更新
• retry更新尝试渲染
• 更新挂起的概念
• timeout处理
• lazy组件更新

Hooks

• 核心原理
• useState
• useEffect
• useContext
• 其它Hooks API

React的源码实现

• Fiber, Update, Scheduler等核心着重讲解
• 流程图和结构图辅助