剖析React内部运行机制-源码结构

本篇文章咱们会主要分析React源码结构，其版本为 16.8.6。

React源码结构

React
|-- .circleci // 见备注1
|   |-- config.yml
|-- .github // 若是发现React的一些bug，可根据该目录下文件中提供的方式进行反馈
|-- fixtures // 见备注2
|   |-- art 
|   |-- attribute-behavior
|   |-- dom
|   |-- eslint
|   |-- expireation
|   |-- fiber-debugger
|   |-- fiber-triangle
|   |-- fizz-ssr-browser
|   |-- packaging
|   |-- shceduler
|   |-- ssr
|   |-- tracing
|   |-- unstable-async
|-- packages // React项目核心文件 见备注3
|   |-- create-subscription // 组件订阅外部数据工具
|   |-- eslint-plugin-react-hooks
|   |-- events // React事件
|   |-- jest-mock-scheduler
|   |-- jest-react
|   |-- react // React对象、组件相关
|   |   |-- npm
|   |   |-- src
|   |   |-- index.js
|   |   |-- package.json
|   |   |-- README.md
|   |-- react-art // React画图相关
|   |-- react-cache // React缓存，目前尚不稳定，不建议使用到实际应用
|   |-- react-debug-tools // React开发者工具
|   |-- react-dom // ReactDOM(渲染、更新等)相关
|   |-- react-events // React事件体系
|   |-- react-is // 检查是不是React元素类型
|   |-- react-native-renderer // ReactNative
|   |-- react-noop-renderer // 用来调试的渲染器
|   |-- react-reconciler // React协调算法
|   |-- react-refresh // 热更新
|   |-- react-stream // React流式服务器渲染
|   |-- react-test-renderer
|   |-- scheduler // 任务调度相关(回调函数、超时、优先级处理)
|   |-- shared
|   |-- use-subscription
|-- scripts
|   |-- babel
|   |-- bench
|   |-- circleci
|   |-- error-codes
|   |-- eslint
|   |-- eslint-rules
|   |-- flow
|   |-- git
|   |-- jest
|   |-- perf-counters
|   |-- prettier
|   |-- print-warnings
|   |-- release
|   |-- rollup
|   |-- shared
|   |-- tasks
|-- .babelrc
|-- .editorconfig
|-- .eslintignore
|-- .eslintrc.js
|-- .gitattribuites
|-- .gitignore
|-- .mailmap
|-- .nvmrc
|-- .prettierrc.js
|-- .watchmanconfig
|-- appveyor.yml
|-- AUTHRS
|-- CHANGELOG.md
|-- CODE_OF_CONDUCT.md
|-- CONTRIBUTING.md
|-- dangerfile.js
|-- LICENSE
|-- netlify.toml
|-- package.json
|-- README.md
|-- yarn.lock
复制代码

上面目录结构最多展现到三级目录，咱们先在宏观层面对React源码有个初步的认识。

备注

一、CircleCI-集成部署工具

“从功能开发完成直到成功部署”这一阶段被称为软件开发“最后一千米”，不少开发团队也愈来愈认识到，持续集成和持续部署可帮助开发团队提升迭代效率和质量。持续集成和持续部署工具层出不穷，CircleCI 就是这类工具中比较优秀的一个。点击了解更多。

二、Fixtures-测试夹具

Fixtures 是测试中很是重要的一部分。他们的主要目的是创建一个固定/已知的环境状态以确保 测试可重复而且按照预期方式运行。点击了解更多。

在该文件夹下面放了一些做者写的测试demo。如何在本地执行这些demo的详细内容请看《React源码--执行fixtures中的项目》这篇文章。

三、packages-React项目核心文件

该文件夹下面包含了React项目中各个重要的包文件，包括react，react-dom，events等。

注意：在每一个目录下面都会有一个READE.md文件，这个文件对当前目录下的文件有个简单的介绍。