源碼分析 · React 開發細節指南

[TOC] > react 更新到 17.0.0 (October 20, 2020) # 項目結構目前有不少大型開源項目采用了 monorepo 這種方式，如 Babel，可以看到這些項目的第一級目錄的內容以腳手架為主，主要內容都在 packages 目錄中分多個 package 進行管理： ```shell- ├── .circleci/ ---------------------------------- 使用 CircleCI 進行持續集成/持續部署 ├── .codesandbox/ ------------------------------- 使用 [CodeSandbox CI](https://codesandbox.io/docs/ci) 服務 ├── build/ -------------------------------------- 構建后的輸出目錄 ├── fixtures/ ----------------------------------- React 開發的測試用例 ├── packages/ ----------------------------------- 源碼目錄，我們主要剖析目錄 │ ├── create-subscription/ -------------------- 在組件里訂閱額外數據的工具 │ ├── dom-event-testing-library/ -------------- XXX │ ├── eslint-plugin-react-hooks --------------- XXX │ ├── jest-mock-scheduler/ -------------------- XXX │ ├── jest-react/ ----------------------------- XXX │ ├── react/ ---------------------------------- 核心代碼 │ ├── react-art/ ------------------------------ 矢量圖形庫 │ ├── react-cache/ ---------------------------- XXX │ ├── react-client/ --------------------------- XXX │ ├── react-debug-tools/ ---------------------- XXX │ ├── react-devtools/ ------------------------- XXX │ ├── react-devtools-core/ -------------------- XXX │ ├── react-devtools-extensions/ ------------- XXX │ ├── react-devtools-inline/ ------------------ XXX │ ├── react-devtools-scheduling-profiler/ ----- XXX │ ├── react-devtools-shared/ ------------------ XXX │ ├── react-devtools-shell/ ------------------- XXX │ ├── react-dom/ ------------------------------ DOM 渲染相關 │ ├── react-fetch/ ---------------------------- XXXX │ ├── react-interactions/ --------------------- XXXX │ ├── react-is/ ------------------------------- React 元素類型相關 │ ├── react-native-renderer/ ------------------ react-native 渲染相關 │ ├── react-noop-renderer/ -------------------- Fiber 測試相關 │ ├── react-reconciler/ ----------------------- React 調制器 │ ├── react-refresh/ -------------------------- XXXX │ ├── react-server/ --------------------------- XXXX │ ├── react-test-renderer/ -------------------- 實驗性的 React 渲染器 │ ├── react-transport-dom-relay/ -------------- XX │ ├── react-transport-dom-webpack/ ------------ XX │ ├── scheduler/ ------------------------------ 規劃 React 初始化，更新等等 │ ├── shared/ --------------------------------- 通用代碼 │ ├── use-subscription/ ----------------------- XXX ├── scripts ------------------------------------- 公共的lint，build，test和release等相關的文件 │ ├── babel/ ---------------------------------- babel 配置腳本目錄 │ ├── bench/ ---------------------------------- bench 目錄 │ ├── circleci/ ------------------------------- circle ci 構建目錄 │ ├── error-codes/ ---------------------------- XXX │ ├── eslint/ -------------------------------- eslint 目錄 │ ├── eslint-rules/ --------------------------- 語法規則和代碼風格 │ ├── flow/ ----------------------------------- Flow 類型聲明 │ ├── git/ ------------------------------------ git鉤子的目錄 │ ├── jest/ ----------------------------------- JavaScript 測試目錄 │ ├── merge-fork/ ----------------------------- XXX │ ├── perf-counters/ -------------------------- XXX │ ├── prettier/ ------------------------------- prettier目錄 │ ├── print-warnings/ ------------------------- XXX │ ├── release/ -------------------------------- 自動發布新版本腳本 │ ├── rollup/ --------------------------------- rollup 構建目錄 │ ├── shared/ --------------------------------- 自動發布新版本腳本 │ ├── tasks/ ---------------------------------- 自動發布新版本腳本 │ ├── yarn/ ----------------------------------- 自動發布新版本腳本 │ ├── authors --------------------------------- shell 文件，可以根據 git shortlog 的輸出生成一個項目參與者的文件。 ├── .editorconfig ------------------------------- 編輯器語法規范配置 ├── .eslintignore ------------------------------- eslint 忽略配置 ├── .eslintrc.js -------------------------------- eslint 配置文件 ├── .gitattributes ------------------------------ 給 attributes 路徑名的簡單文本文件 ├── .gitignore ---------------------------------- git 忽略配置 ├── .mailmap ------------------------------------ 郵件列表檔案 ├── .nvmrc -------------------------------------- nvm 配置文件 ├── .prettierignore ----------------------------- prettier 忽略文件 ├── .prettierrc.js ------------------------------ prettierrc 配置文件 ├── .watchmanconfig ----------------------------- watchman 配置文件 ├── appveyor.yml -------------------------------- GitHub 托管項目的自動化集成 ├── AUTHORS ------------------------------------- 開發者列表檔案 ├── babel.config.js ----------------------------- babel 配置文件 ├── CHANGELOG.md -------------------------------- 更新日志 ├── CODE_OF_CONDUCT.md -------------------------- 行為準則 ├── CONTRIBUTING.md ----------------------------- Contributing to React ├── dangerfile.js ------------------------------- 提高 Code Review 體驗 ├── netlify.toml -------------------------------- 持續集成靜態網站 ├── package.json -------------------------------- 項目管理文件 ├── README.md ----------------------------------- 項目文檔 ├── SECURITY.md --------------------------------- 安全問題說明 ├── yarn.lock ----------------------------------- yarn 加鎖文件 ``` 一眼望去，上面的目錄結構是不是感覺很是奇怪？ **根目錄下沒有 src 之類的源碼目錄，也沒有 test 這類的存放單元測試的目錄，只有一個 packages 目錄。這個 repository 其實是一個用 yarn 的 workspaces 來管理的 monorepo。實際上，我們往npm上發布的幾個package都來自于同一個codebase，包括react、react-dom、react-is……**。 > npm 7 開始，包括了 workspaces 功能 > https://classic.yarnpkg.com/en/docs/workspaces/ > [yarn的WorkSpaces功能介紹](https://www.dazhuanlan.com/2019/12/25/5e027015a4775/) > [Monorepo——大型前端項目的代碼管理方式](https://segmentfault.com/a/1190000019309820) # JSX [JSX(JavaScript XML)](http://facebook.github.io/jsx/) 是`js`內定義的一套類 XML 語法，可以解析出目標 js 代碼，顛覆傳統`js`寫法。`HTML`由瀏覽器解析，而`JSX`是由`js`解析。當讓也可以通過構建工具先解析生成，如`webpack`, 這樣可以減少代碼這行中 js 解析 JSX 的時間，這個后面會專題講訴。 JSX 原本是使用官方自己提供的方法處理，2015-7-12 日官方[博客文章](http://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)聲明其自身用于 JSX 語法解析的編譯器 JSTransform 已經過期，不再維護，`React JS`和`React Native`已經全部采用第三方`Babel`的 JSX 編譯器實現。 babel 作為一個代碼轉換工具，它不僅僅能將 ES6 轉化成 ES5，也能夠**將 JSX 轉換成某個函數嵌套調用的結構，而這個函數是可以自定義的**，具體請參考 [transform-react-jsx](https://babeljs.io/docs/plugins/transform-react-jsx/) [JSX 和 Virtual DOM](https://github.com/MuYunyun/blog/issues/24) [preact 源碼學習系列之一：JSX解析與DOM渲染](https://github.com/youngwind/blog/issues/103) [可替代的JSX](https://www.zcfy.cc/article/alternatives-to-jsx) # React.createElement [React.js點滴知識](https://blog.csdn.net/sinat_17775997/category_6352631_6.html) # 參考 > https://indepth.dev/ > [React 源碼全方位剖析](http://www.sosout.com/2018/08/12/react-source-analysis.html) > https://react.jokcy.me/book/update/expiration-time.html