[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