由于近期在看React框架源码、底层实现方面的知识,所以想把学习心得整理出来。
这也是一个新的系列「从0实现React 18核心模块」的第一篇。
接下来还会更新:render、commit阶段的实现,以及Hooks架构、useState、useEffect、单双节点Diff的过程还有React 18中的并发更新原理。
在看文章之前,我们可以先想几个问题:
如果自己实现一个 React 框架,它需要包含哪些内置的包:
如果还有一个必要的包,那就是react-dom:
当我们在项目中使用 React 构建界面时,主要使用的就是 react 包。它提供了开发者需要的所有API。如React.Component、React.createElement、React.useState等等,所以它也是大多数 React 项目的基础。
react-reconciler包是一个更底层、更高级的库,它实现了reconciliation协调算法,reconciliation是 React 的一种核心优化策略,用于在更新组件时比较虚拟DOM树的差异,并将实际更改应用到实际的DOM树。这有助于提高性能,因为避免了不必要的DOM操作。
它主要用于创建自定义渲染器,以及在不同的平台中去使用 React。例如,react-dom(用于Web平台)和react-native(用于移动应用)都使用react-reconciler作为底层库,实现了针对各自平台的渲染逻辑。
const element = <div className="contAIner">Hello, world!</div>;
在React中,JSX是一种JAVAScript语法扩展,允许你在JavaScript代码中编写类似html的标记。要使用JSX,需要在构建过程中将其转换为标准的JavaScript代码。
通常,这个转换过程包括两个主要部分:
在React 17之前,JSX语法会被编译成React.createElement函数的调用,用来创建虚拟DOM元素。
转换结果如下:
const element = React.createElement(
"div",
{ className: "container" },
"Hello, world!"
);
从React 17开始,引入了新的JSX转换功能,称为"Runtime Automatic"(自动运行时)。这意味着在使用JSX语法时,不再需要手动引入React库。在自动运行时模式下,JSX会被转换成新的入口函数,import {jsx as _jsx} from 'react/jsx-runtime'; 和 import {jsxs as _jsxs} from 'react/jsx-runtime';。
转换结果如下:
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx("div", {
className: "container",
children: "Hello, world!"
});
接下来我们就来实现jsx方法或React.createElement方法(包括dev、prod两个环境)。
工作量包括:
jsx 转换方法包括:
在React 17之前,JSX转换应用的是createElement方法,下面是它的实现:
/**
*
* @param type 元素类型
* @param config 元素属性,包括key,不包括子元素children
* @param maybeChildren 子元素children
* @returns 返回一个ReactElement
*/
const createElement = (
type: ElementType,
config: any,
...maybeChildren: any
) => {
// reactElement 自身的属性
let key: Key = null;
let ref: Ref = null;
// 创建一个空对象props,用于存储属性
const props: Props = {};
// 遍历config对象,将ref、key这些ReactElement内部使用的属性提取出来,不应该被传递下去
for (const prop in config) {
const val = config[prop];
if (prop === 'key') {
if (val !== undefined) {
key = '' + val;
}
continue;
}
if (prop === 'ref') {
if (val !== undefined) {
ref = val;
}
continue;
}
// 去除config原型链上的属性,只要自身
// 一般使用{...props}将所有属性都传递下去,所以摘除ref、key属性外需要被保存到props中
if ({}.hasOwnProperty.call(config, prop)) {
props[prop] = val;
}
}
const maybeChildrenLength = maybeChildren.length;
if (maybeChildrenLength) {
// [child] [child, child, child]
if (maybeChildrenLength === 1) {
props.children = maybeChildren[0];
} else {
props.children = maybeChildren;
}
}
return ReactElement(type, key, ref, props);
};
注意:React.createElement方法和jsx方法的区别这里只体现在第三个参数上。
从React 17之后,JSX转换应用的是jsx方法,下面是它的实现:
/**
*
* @param type 元素类型
* @param config 元素属性
* @param maybeKey 可能的key值
* @returns 返回一个ReactElement
*/
const jsx = (type: ElementType, config: any, maybeKey: any) => {
// 初始化key和ref为空
let key = null;
let ref = null;
// 创建一个空对象props,用于存储属性
const props: Props = {};
// 遍历config对象,将ref、key这些ReactElement内部使用的属性提取出来,不应该被传递下去
for (const prop in config) {
const val = config[prop];
if (prop === "key") {
continue;
}
if (prop === "ref") {
if (val !== undefined) {
ref = val;
}
continue;
}
// 一般使用{...props}将所有属性都传递下去,所以摘除ref、key属性外需要被保存到props中
if ({}.hasOwnProperty.call(config, prop)) {
props[prop] = val;
}
}
// 将 maybeKey 添加到 key 中
if (maybeKey !== undefined) {
key = "" + maybeKey;
}
return ReactElement(type, key, ref, props);
};
这段代码定义了一个jsx函数,主要用于创建React元素。首先,它会提取可能存在的key和ref属性,并将剩余属性添加到一个新的props对象中。最后用ReactElement函数创建一个React元素并返回。
从上面代码中可以看到还实现了ReactElement方法:
// jsx-runtime.js
const supportSymbol = typeof Symbol === 'function' && Symbol.for;
// 为了不滥用 React.elemen,所以为它创建一个单独的键
// 为React.element元素创建一个 symbol 并放入到 symbol 注册表中
export const REACT_ELEMENT_TYPE = supportSymbol
? Symbol.for('react.element')
: 0xeac7;
export const ReactElement = function (type, key, ref, props) {
const element = {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref,
props,
_mark: 'lsh',
};
return element;
};
export const jsx =...
我们试着把自己实现的jsx方法,创建一个ReactElement,看它是否能够渲染在页面上。
实现jsx方法
jsx-Demo运行地址
jsx函数和createElement函数都用于在React中创建虚拟DOM元素,但它们的语法和用法有所不同。jsx函数来自于React 17及更高版本中的新的JSX转换功能,称为"Runtime Automatic"。
以下是两者之间的主要区别:
例如,一个JSX元素:
const element = <div className="container">Hello, world!</div>;
使用createElement转换后的代码如下:
const element = React.createElement(
"div",
{ className: "container" },
"Hello, world!"
);
使用jsx函数(自动运行时)转换后的代码如下:
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx("div", { className: "container", children: "Hello, world!" });
在createElement函数中:
React.createElement("div", {className: "App", key: "appKey"}, "hello,app");
在jsx函数中:
import { jsx as _jsx } from "react/jsx-runtime";
_jsx("div", {className: "app", children: "hello,app"}, "appKey");
这时可能产生两个疑问:
在之前的React版本中,每当创建一个新的React元素时,React都需要从属性对象中提取key和ref,这会导致额外的性能开销。
将key作为单独的参数传递,可以让React在处理虚拟DOM树时更容易地访问key,无需每次都从属性对象中查找。这有助于提高React的性能和效率,特别是在处理大量元素和复杂组件树时。
打包流程稍微有些复杂,后续写到文章里。
简单来说就是使用 Rollup,将编写jsx方法的文件打包出来,通过pnpm link --global的方式生成一个全局的react包,这样就可以通过pnpm link react --global调试自己创建的 create-react-app demo项目了。
构建react包思路