react源码解密1-思路介绍

本教程以react18为例。

源码学什么

核心原理

• 组件生命周期
• 虚拟dom实现
• diff算法
• 组件渲染与更新
• hooks机制

事件与状态管理

• 事件代理机制
• 自定义事件系统
• setState工作原理
• 状态更新处理
• props与state

react架构

• fiber系统
• cocurrent模式
• lane模型
• 调度系统
• 时间切片

react功能简介

传统的前端开发是手工去调用浏览器api（例如querySelector获取dom元素再去操作dom元素）， react相当于从逻辑上给你创建了js层面的组件概念。单个组件内管控一片js层面的虚拟dom元素，且由于是纯js函数概念，于是她轻而易举就实现了“数据变量去驱动dom”。

function MyPage() {
    const count = 1;
    return <div>{count}</div>
}

看到了吗，一个函数就是一个js层面的组件概念，在js层面她天然可以靠count变量去驱动函数所return出来的虚拟dom。只需要函数执行一下。

上面我们说的其实还只是驱动虚拟dom，但react实际上在最后再加上一步“虚拟dom提交到真实dom”就等于驱动了真实dom了。

版本演进

• 2016年。 react15，基本功能稳定。
• 2017年。 react16.引入fiber架构和reactHooks。
• 2020年。react17事件委托机制变化，new jsx transform.
• 2022年。 react18. concurrent rendering并发渲染机制成为默认 机制，suspense(最早仅用于16版本的React.lazy代码分割，现在用到了DataFetching+SSR)，transitions, streaming(提供了renderToPipeableSteam api)。
• 2024年。react 19. React server component, RSC从实验特性变成稳定特性。

看源码方法

• 有数据结构和算法思维。
• 原子思维。即任何框架或库底层无非是js的：异步操作、闭包、原型链、
• 分层学习：宏观--中观---微观。 从宏观架构到数据结构与算法流转，再到细节。
• 先应用再原理。
• 善于调试学习，以及对比架构演进的区别。