React16源码: Why16, 研究源码的意义, 源码目录核心结构分析

为什么要选择React16

• 现在React18都早已实践很多，为何回过头来看16版本的代码
• 理由如下
  • 从实际出发，企业内老旧项目多为16版本，理解16的核心能够帮助我们快速解决问题
  • 16版本React是完全重写了核心代码, 是一次重大的更新
    • 引入了 fiber 这个概念，从根本上解决了JS单线程运行问题
    • 引入了hooks，摆脱了 class component 的一些繁琐的内容
    • …

关于React框架

• React 是一个非常纯粹的 UI 框架，通过state映射UI的方式来屏蔽了dom操作
• 现在业界的框架大多如此, 但是说React纯粹是因为它的API设计非常的纯粹
  • 核心API就是 setState，其余所有的内容都围绕着组件化来设计
  • 没有directive双向绑定以及其他的一些API
  • 它要改变一个UI你只能通过setState来改变对应的状态
  • 这就给了react无比纯粹的开发体验, 一切基于组件
  • 同时react又是一个思想超前的框架
  • 而Vue框架是基于React发展而来，很多思想都是借鉴React的思路

深入研究React源码的意义

• 能在遇到bug的时候，从底层去思考如何去解决问题
• 并且能够让你在开始项目之前就想好更好的架构方式
• React源码的很多设计细节都是非常高明的，学习源码能有助于你提升整体的编码能力
• React源码是由全世界最好的一部分前端开发人员一起维护了好几年才形成现在这个版本的代码
• 它的代码质量肯定是非常高的, 它的一些解决方案是非常有效的
• 研究这些编码的思维，对我们将来肯定也有非常大的帮助

React16 源码目录结构分析

1 ）概述

• 比如: React 16.6 版本
• 仓库地址: https://github.com/facebook/react/tree/v16.6.0/packages

核心结构

react/packages
├── event        # 编译相关 
├── react            # 核心 api
├── react-dom       # 核心 api 操作dom
├── react-reconciler          # 服务端渲染
├── scheduler             # .调度计划
├── shared          # 共享代码
├── ...          # 其他

2 ）说明

• event 事件系统

  • 我们知道react使用的是onClick这种在标签上面写props的方法去绑定事件
  • 它跟原生的事件绑定是有一定的区别的
  • 它自己实现了一套事件的一个传播的体系
  • 这部分的代码就在events 目录下面

• react 核心api

  • 它的核心代码全在这里面

• react-dom dom操作核心api

  • 和 dom操作有关
  • react-dom 本身非常依赖 react-reconciler 包

• react-reconciler 协调器

  • react api外最核心的api
  • 被 react-dom 包重度依赖
  • 同时也被用于 react-native 中

• scheduler 调度器

  • 调度过程的逻辑非常复杂
  • 是 React16之后非常核心的一块内容

• shared 工具包

  • 存放一些比较共用的代码

3 ）其他

• 不是说其他的源码内容不重要，先主要关注这几大模块核心的逻辑