源码分析 · 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