React 的源码与原理解读（一）：从创建React元素出发
写在专栏开头（叠甲）
-
作者并不是前端技术专家，也只是一名喜欢学习新东西的前端技术小白，想要学习源码只是为了应付急转直下的前端行情和找工作的需要，这篇专栏是作者学习的过程中自己的思考和体会，也有很多参考其他教程的部分，如果存在错误或者问题，欢迎向作者指出，作者保证内容 100% 正确，请不要将本专栏作为参考答案。
-
本专栏的阅读需要你具有一定的 React 基础、 JavaScript 基础和前端工程化的基础，作者并不会讲解很多基础的知识点，例如：babel 是什么，jsx 的语法是什么，需要时请自行查阅相关资料。
-
本专栏很多部分参考了大量其他教程，若有雷同，那是作者抄袭他们的，所以本教程完全开源，你可以当成作者对各类教程进行了整合、总结并加入了自己的理解。
本专栏的内容
这个专栏的写作是为了记录在阅读 React 源码和 React 源码构造思想的时候的心得体会编写的，这个专栏将从 React 的怎么样将一个 jsx 组件生成出对应的 DOM 出发，讲解 React 源码的运行原理和设计思路，组件的生命周期如何绑定，React 的虚拟DOM 为什么比真实的DOM 高效，并且简要谈谈 React Hooks 的设计。下面我们开始我们的内容：
React 的源码变迁和我们使用的版本
这篇教程基于的是 React 的 18.1.0 版本，源码地址：https://github.com/facebook/react。因为不同版本的源码和运行原理可能完全不一样，所以你需要注意你阅读的源码的版本。以下是一些主要的注意事项：
本文的一些原理和设计至少从 React 16 开始出现，因为 React 16 首次引入了 Fiber 架构，使得其相对于上一代发生了翻天覆地的变化。它使得 React 从组件渲染更新，任务调度，生命周期等方面发生的变化，整体也进行了大量的重构，这部分我们会在后续讲到。本教程的大部分内容将不适用于 React 16 之前用户阅读。
React 16.8 引入了 Hooks 的概念，通过 Hooks 解决嵌套问题，使得代码更加简洁。
React 17.0 引入了 concurrent mode 并发模式和 lanes 车道和，来调度任务和规划任务的优先级，这部分我们会在后续讲到。
React 18.0 则更新了 Root API 更新，可以为一个 React App 创建多个根节点。
从 JSX 的解析出发
我们从 Jsx 出发来讲 React 的运作和源码实现，首先这是一个我们常见的 React 组件结构：
function App() {
return <h1 class="test" key="122" >Hello World</h1>;
}
React 的处理原理是将 jsx 代码转换成自己的 createElement 函数进行处理，在 React(React16.x 及之前)， 这个处理是由 React 实现的，以下是经过转化的内容，我们可以对照着 API 来看，第一个参数是类型，第二个是配置项，第三个是子元素
//function createElement(type, config, children){ }
function App() {
return React.createElement("h1", {
class: "test"
key:"122"
}, "Hello World");
}
在 React17.0 之后，Raect 和 babel 进行了合作，使用 babel 进行上述的处理，所以在 React17.0 我们不用引入 React 也可以运行我们的 jsx，在 React16.x 及之前则不行，即使我们的代码没用用到 React ，我们也需要引入 React 。React17.0 使用了一个新的结构，jsx 来处理我们的 jsx 元素，第一个参数是类型，第二个是配置项和子元素，第三个是 key 。
元素中的的配置项将以 key - value 的形式来配置，而子元素将会放在一个 children 项中，若子结构中只有一个子元素，那么 children 就是一个 jsx()，若有多个元素时，则会转为数组：
//export function jsx(type, config, maybeKey) {}
function App() {
return jsx("h1", {
class: "test",
children: "Hello World"
}, "122");
}
而之后的逻辑基本类似，createElement 和 jsx 两个函数的最终目的都是返回一个固定格式的 React 元素，我们可以通过打印一个元素来得到它。React 元素由 type、key、ref、props、_owner 和 一个标识 React 元素组成，_store, _self, _source 三个内部属性，在开发模式下才会被创建，这里我们按下不表。现在我们的目标就是生成一个这样的元素：
const ReactElement = function(type, key, ref, self, source, owner, props) {
const element = {
$$typeof: REACT_ELEMENT_TYPE， //标识
type: type, //元素的类型, 可以为 HTML 元素或 React 组件
key: key, //元素在其同级兄弟中的的身份标志（唯一键值）
ref: ref, //对组件实例的引用
props: props, //组件或 HTML 元素的属性值
_owner: owner //创建该元素的起因
}
/** ... 此处省略开发模式的代码 ... */
return element;
}
生成 ReactElement 的过程
在 React16.x 之前的时候，这个处理过程由 createElement 来实现，我们看看源代码如下。
首先我们从代码里取出 key 和 ref （如果存在的话），然后取出 self 和 source （开发模式），之后将其他元素放到 props 中，这里 RESERVED_PROPS 存放了 key 、 ref 、 self 和 source 四个属性，也就是把这四个属性过滤掉。
之后获取元素的孩子，这里的处理是，如果孩子长度为 1 ，那么children 是一个元素，否则返回一个数组。
之后是获取 defaultProps ，这里的逻辑是这样的，首先我们的 type 可能有两种取值
- 原生的 html 标签，比如 div ，span 等等
- 一个 React 组件，当然众所周知一个 React 组件可能有两种类型，类组件和函数组件，而函数组件可以添加 defaultProps 属性，此时我们就可以把 defaultProps 属性提取出来放到我们的 props 中
export function createElement(type, config, children) {
let propName;
const props = {};
let key = null;
let ref = null;
let self = null;
let source = null;
if(config != null) {
/** 获取 ref */
if(hasValidRef(config)) {
ref = config.ref;
}
/** 获取 key */
if(hasValidKey(config)) {
key = '' + config.key;
}
}
/** 获取 self 和 source */
self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
/** 获取其他 props */
for (propName in config) {
if (
hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)
) {
props[propName] = config[propName];
}
}
/** 获取 children */
const childrenLength = arguments.length - 2;
if(childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
const childrenArray = Array(childrenLength);
for(let i = 0; i < childrenLength; i++) {
childrenArray = Array(childrenLength);
}
props.children = childrenArray;
}
/** 获取 defaultProps */
if(type && type.defaultProps) {
const defaultProps = type.defaultProps;
for(propName in defaultProps) {
if(props[Name] in defaultProps) {
props[propName] = defaultProps[propName];
}
}
}
/** 创建 React 元素 */
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props
)
}
在 React17.x 之后的时候，这个处理过程由 jsx 来实现，实现的原理大同小异，我们就简要说一说：
export function jsx(type, config, maybeKey) {
let propName;
const props = {};
let key = null;
let ref = null;
// 若设置了key，则使用该key
if (maybeKey !== undefined) {
if (__DEV__) {
checkKeyStringCoercion(maybeKey);
}
key = '' + maybeKey;
}
// 若config中设置了key，则使用config中的key
if (hasValidKey(config)) {
if (__DEV__) {
checkKeyStringCoercion(config.key);
}
key = '' + config.key;
}
// 提取设置的ref属性
if (hasValidRef(config)) {
ref = config.ref;
}
// 剩余属性将添加到新的props对象中
for (propName in config) {
if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
return ReactElement(type, key, ref, undefined, undefined, ReactCurrentOwner.current, props);
}
浅谈 ReactElement 的 $$typeof
现在我们已经明白了从 jsx 到 ReactElement 的过程，我们看到，ReactElement 中有一个特别的字段 $$typeof ，它的值是一个 Symbol，那么为什么React元素需要这个 $$typeof 属性呢。
我们先从 Symbol 出发：
-
Symbol是ES6新推出的一种基本类型，它表示独一无二的值，它可以接受一个字符串作为参数，带有相同参数的两个Symbol值不相等，这个参数只是表示Symbol值的描述而已。由于Symbol值的唯一性，意味着它可以作为对象的属性名，避免出现相同属性名，产生某一个属性被改写或覆盖的情况。 -
而
Symbol.for()是用于将描述相同的Symbol变量指向同一个Symbol值，Symbol.for()定义相同描述的值时会被搜索到，描述相同则他们就是同一个值。
同时，React 提供了一种方式来将用户输入的内容当成html来渲染：
<div dangerouslySetInnerHTML={{ __html: message }}></div>
也就是说，那么我们可以构造一个类似 ReactElement 的结构，然后传入我们的页面中，比如下面的例子，这里是一个知识点，message 这样的插值可以传入基本类型，一个组件，一段 jsx，也可以直接传入一个 ReactElement ，因为最终他们都会被编译成 ReactElement 进行处理：
class App extends React.Component {
render() {
const message = {
type: "div",
props: {
dangerouslySetInnerHTML: {
__html: `HTML
link`
}
},
key: null,
ref: null,
$$typeof: Symbol.for("react.element")
};
return <>{message}</>;
}
}
但是很幸运，应该没有开发者希望将用户编写的数据封装成一个 ReactElement ，因为只要我们的逻辑代码不去创建一个 Symbol.for("react.element") ，用户将没有手段去创建它。但是如果我们使用类似 type : "React" 等方式来标识它，此时出现了一个问题，假设我们的数据来自后端，它使用 json 的方式传递过来，就能复刻出一个 ReactElement , 但是 json 中并没有 Symbol 这个类型，所以上述的方法就失效了。
其实 React 13 当时就存在着这个漏洞。之后，React 14 就修复了这个问题，修复方式就是通过引入$$typeof属性，并且用 Symbol 来作为它的值。所以用一句话概括就是 Symbol 属性的引入是为了预防 XSS 攻击 ，关于 XSS 这部分可以看我相关笔记：
https://blog.csdn.net/weixin_46463785/article/details/128750337
总结
最后我们再来梳理一下从 jsx 到 ReactElement 的过程：
- 用户编写 jsx 代码
- 使用 React 或者 babel 将 jsx 代码解析，放入对应的处理函数中
- 处理函数将 type, key, ref, self, source, owner, props 属性分离，传入创建节点的处理函数中
- 处理函数创建 ReactElement 节点，进行一些额外处理并且加上 $$typeof 标识
下一篇我们将学习 React 16.x 的一个重要的结构 fiber 结构