同作为MVVM框架,React相比于Vue来讲,上手更需要JavaScript
功底深厚一些,本系列将阅读React
相关源码,从jsx -> VDom -> RDOM
等一些列的过程,将会在本系列中一一讲解
工欲善其事,必先利其器
经过多年的发展,React已经更新了大版本16、17、18
,本系列主要讲的是 version:17.0.2
,在讲这个版本之前,我们先看一看在babel
的编译下,每个大版本之下会有什么样的变化。
jsx
<div className='box'>
<h1 className='title' style={
{
'color':'red'}}>React源码解析</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
v16.x及以前版本
v17及之后版本
所以各位看到了,在v16
及以前我们babel
进行jsx
解析编译的是根据@babel/babel-preset-react-app解析成React.createElement
进行包裹的,而v17
以及之后的版本,官网早就说明,对jsx
的转换用react/jsx-runtime
,而不再依赖React.createElement
了,看到这里我想各位对不同版本的babel解析jsx已经有了眉目了,早已经迫不及待想去看看jsx-runtime和createElement到底是如何玩的,那么进入源码
在babel解析后的v17产物中我们可以看得到 var _jsxRuntime = require("react/jsx-runtime");
那么我们追本溯源可以找到在packages/react/src/jsx/ReactJSX.js
里面的jsxs
是怎么来的
// packages/react/src/jsx/ReactJSX.js
import {
REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
import {
jsxWithValidationStatic,
jsxWithValidationDynamic,
jsxWithValidation,
} from './ReactJSXElementValidator';
import {
jsx as jsxProd} from './ReactJSXElement';
const jsx = __DEV__ ? jsxWithValidationDynamic : jsxProd;
const jsxs = __DEV__ ? jsxWithValidationStatic : jsxProd;
const jsxDEV = __DEV__ ? jsxWithValidation : undefined;
export {
REACT_FRAGMENT_TYPE as Fragment, jsx, jsxs, jsxDEV};
在非dev
环境下我们继续去找jsProd
export function jsx(type, config, maybeKey) {
let propName;
//标签上的属性集合
const props = {
};
//单独处理key ref
let key = null;
let ref = null;
if (maybeKey !== undefined) {
key = '' + maybeKey;
}
if (hasValidKey(config)) {
// 处理合法的key
key = '' + config.key;
}
if (hasValidRef(config)) {
// 处理合法的ref
ref = config.ref;
}
// 把属性加到props中
for (propName in config) {
if (
hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)
)