剖析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文件，這個文件對當前目錄下的文件有個簡單的介紹。