--- theme: cyanosis highlight: atom-one-dark --- ## 前言什么叫`JSX`？，我们可以先从[ React官网 ](https://react.docschina.org/docs/introducing-jsx.html)的定义窥见一二。其中讲到**JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式**，即可以让我们写React组件像在写HTML一样。除了类似原生的`HTML`标签外，我们还可以自定义自己的组件，进而一步步构成复杂的页面。那么在这一过程中`React`是如何处理`JSX`的，我们将在接下来一一拆解，透过现象来挖掘背后的本质。本文源码 [feature/jsx](https://github.com/baozouai/react-source-study/tree/feature/jsx) ，在`scripts`中提供了三个命令： ```shell ## 需要import React，index.js yarn dev or npm run dev ## 不需要import React，index-jsx-runtime.js yarn runtime or npm run runtime ## 自定义jsx-runtime, index-feact-jsx-runtime.js yarn feact or npm run feact ``` ## import React from 'react' 在`React17` 以前，如果我们不显式调用`import React from 'react'` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab55b62e4d14ff2b5a6e93d1612d026~tplv-k3u1fbpfcp-watermark.image) 那么在页面上肯定会报如下错误 ![react not define.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/312127ce57c141edaa6866937239afd7~tplv-k3u1fbpfcp-watermark.image) 当然在我们刚开始用`React`的时候，前辈、书里都说过必须在顶部显示`import React from 'react'`，久而久之，我们都会条件反射式地写上这么一句。可是你有没有想过，为何必须这样做页面才不会报错警告呢？明明我下面都没用到`React`相关的啊！ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c194da1cb43b4a9db59aa063ffafc40a~tplv-k3u1fbpfcp-watermark.image) 而且你还发现，每次你写上`import React from 'react'`，即使发现代码里都没有用到`React`相关的，但是`vscode`里面的`import React`就会高亮，而对比下面的`import eslint`就是暗色的，并且提示声明了但没使用 ![eslint not use.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad19a4ba77704d6a83fc977eabbbf53a~tplv-k3u1fbpfcp-watermark.image) 诶，上面提到的两个问题为何那么诡异？下面，让我们化身福尔摩斯来一一揭秘吧~ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fa472d5b39c407581534f99b46d5210~tplv-k3u1fbpfcp-watermark.image) ### React.createElement React官网 [ JSX 表示对象 ](https://react.docschina.org/docs/introducing-jsx.html#jsx-represents-objects)有一句话：**Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用**。翻译翻译，就是说我们写的组件中用到了`JSX`，那么转译的过程中`Babel`就会去找`React.createElement`，将`JSX`转译为相应的对象。举个🌰： ```js function App() { return

app

} console.log('App: ', App) console.log(': ', ) ``` 上面如果直接输出App，那么App本质上就是一个函数，而如果是这样的用法``，即调用了组件，我们可以在控制台看到看到两种的区别 ![app and .png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46698fa603fb44f0a1bfdf389ebde804~tplv-k3u1fbpfcp-watermark.image) 即`Babel`会将``转译为下面的代码： ```js React.createElement( ƒ App(), // type, ƒ App()表示函数的意思 {}, // config undefined // children ); ``` 而之后转译`div`，也会转译为下面代码： ```js React.createElement( 'div', // type { className: ".app" }, // config 'app' // children ); ``` 那我们看下[ createElement ](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/src/react/v17/react/src/ReactElement.js#L165)的实现 ```js export function createElement(type, config, children) { let propName; // Reserved names are extracted const props = {}; let key = null; let ref = null; let self = null; let source = null; if (config != null) { // 1.这里验证了ref和key如果都符合要求，会拦截这两者 if (hasValidRef(config)) { ref = config.ref; } if (hasValidKey(config)) { key = '' + config.key; } // 以下省略了__self和__source ... // 2.处理除了ref和key的props for (propName in config) { if ( hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName) ) { props[propName] = config[propName]; } } } // 3.处理children const childrenLength = arguments.length - 2; if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { const childArray = Array(childrenLength); for (let i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 2]; } props.children = childArray; } // 4.处理defaultProps if (type && type.defaultProps) { const defaultProps = type.defaultProps; for (propName in defaultProps) { if (props[propName] === undefined) { props[propName] = defaultProps[propName]; } } } // 5.最后调用ReactElement return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, ); } ``` 我们分析上面的代码过程 #### 1. 拦截ref和key ```js if (hasValidRef(config)) { ref = config.ref; } if (hasValidKey(config)) { key = '' + config.key; } ``` 如果`ref`或`key`符合要求，那么将两者单独取出来，而不会放到下面的`props`，这也验证了我们在父组件传给子组件`ref`或`key`的prop时，在子组件是取不到的，因为一开始就被拦截掉了 #### 2. 处理除了ref、key、__self和__source的props ```js for (propName in config) { if ( /** * hasOwnProperty.call(config, propName)的意思就是只取传给组件的prop，而不取继承而来的 * RESERVED_PROPS即包含key、ref、__self、__source，后两个只用于开发环境，可以忽略 */ hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName) ) { props[propName] = config[propName]; } } ``` #### 3. 处理children ```js const childrenLength = arguments.length - 2; if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { const childArray = Array(childrenLength); for (let i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 2]; } props.children = childArray; } ``` 我们看`createElement（type，config，children）`接收了三个参数，但实际上一个父节点可以有多个子节点，如下面的`div`有两个子节点 ```js

span1 span2

``` 那么`Babel`会转化为如下代码 ```js React.createElement( 'div', // type { className: ".app" }, // config { $$typeof: Symbol(react.element), key: null， props: {children: 'span1'}, ref: null, type: "span", }, { $$typeof: Symbol(react.element), key: null, props: {children: 'span2'}, ref: null, type: "span" } ); ``` 也就是说，如果有多个child，那么会在第二个参数后按顺序传入每个child（这里会先用`createElement`处理子节点，然后再处理父节点，所以我们可以看到传入的child已经处理好了）所以下面的代码才用`arguments`的长度减2来获取真正传入child的数量 ```js const childrenLength = arguments.length - 2; ``` 当然这里可以用es6的`...children`来替代之后判断child数量，如果只有一个，直接就赋值给`props.children`，否则将所有的`child`放入数组，再放到`props.children`上 ```js if (childrenLength === 1) { // child数量只有一个，直接就赋值给props.children props.children = children; } else if (childrenLength > 1) { // 否则将所有的`child`放入数组 const childArray = Array(childrenLength); for (let i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 2]; } props.children = childArray; } ``` #### 4. 处理defaultProps 如果有传入了`defaultProps`，比如 ```js MyComponent.defaultProps = { prop1: 'x', prop2: 'xx' ...} ``` 如果没传给组件`prop`，或者传了但值为`undefined`，那么判断到有传`defaultProps`，会去取`defaultProps`上对应的`prop` ```js if (type && type.defaultProps) { const defaultProps = type.defaultProps; for (propName in defaultProps) { if (props[propName] === undefined) { props[propName] = defaultProps[propName]; } } } ``` 我们看到上面是用 `===` 来判断的，则如果我们给组件传`prop1`为null，那么组件里面得到的会是null，而不是`defaultProps`上的`prop1: 'x'` #### 5. 最后调用ReactElement [ReactElement](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/src/react/v17/react/src/ReactElement.js#L74) 代码不多，就是将传入参数组合成一个`element`对象并返回 ```js const ReactElement = function(type, key, ref, self, source, owner, props) { // self, source用于DEV，这里略过 const element = { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key, ref: ref, props: props, }; return element; }; ``` - `$$typeof: REACT_ELEMENT_TYPE`代表ReactElement类型，实质是一个`Symbol`值，为`Symbol.for('react.element')` - `type`即为组件类型，对于原生dom，`type`则是对应的`tag`，如`div`, `span`等，对于函数组件`FnComp`、类组件`ClassComp`则是对应的函数或类，如`ƒ FnComp()`，`class ClassA` ### `import React`为何为高亮这是由于在`(j|t)sconfig.json`里面默认有个配置： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21ceabad0f304d72aafc1aa45e60bd7c~tplv-k3u1fbpfcp-watermark.image) 如果你改为自己写的如`Feact.createElement`，如`"jsxFactory": "Feact.createElement"`，那么我们可以看到原先的`import React`就不会高亮了 ![feact.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/746b701601084c50b2bb15b8c7c37662~tplv-k3u1fbpfcp-watermark.image) 不过以上只是在编辑器层面上的显示作用，要真正起作用还是得配置`Babel` ## jsx-runtime `React17` [提供一个全新版本的 JSX 转换](https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)，即不用再显式`import React`，原因是`React`与`Babel`合作推出了 [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)，该`plugin`会默认到`react`目录下的[ jsx-runtime.js ](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/src/react/v17/react/jsx-runtime.js)文件读取相应的`jsx`、`jsxs`等函数来转译相应的`JSX` ![jsx-runtime.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51e79552ca614c3782be4e56c3bfef23~tplv-k3u1fbpfcp-watermark.image) [jsx ](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/src/react/v17/react/src/jsx/ReactJSXElement.js#L80)函数基本与`createElement`相同，但有一点要注意，在`createElement`里面要处理`children`，而在`jsx`里面，会直接在`config.children`里面得到`children`，省去了处理环节 ```js function App() { return

span1 span2

} ``` ![div-jsx-runtime.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/896d9210e49848bf8688ae69325bb97a~tplv-k3u1fbpfcp-watermark.image) ## 自定义你自己的jsx-runtime 比如你之后觉得自己行了，想写一个`react-like`库，比如`feact`，那你可以在[ feact/jsx-runtime.js ](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/src/feact/jsx-runtime.js)下提供对应的`jsx, jsxs`等 ![feact-jsx-runtime.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b51a685e4c1342549e55af77b80da9a0~tplv-k3u1fbpfcp-watermark.image) 然后必须在[ webpack.config.js ](https://github.com/baozouai/react-source-study/blob/feature%2Fjsx/config/webpack.config.js#L353)里面给`@babel/plugin-transform-react-jsx`加上`importSource`为`feact` ```js plugins: [ [require.resolve('@babel/plugin-transform-flow-strip-types')], ['@babel/plugin-transform-react-jsx',{runtime:'automatic', importSource: 'feact'}] ] ``` ## 总结 1. 😯，原来在React17之前必须显式 `import React` 是因为 `Babel` 会默认将 `JSX` 通过 `React.createElement` 转译，如果不引入 `React` ，那自然就取不到 `createElement` ，也就自然会报错了 2. 😯，原来`JSX` 会被 `Babel` 转译为如下对象 ```js { $$typeof: Symbol(react.element), key: null, props: {children: 'span1'}, ref: null type: "span", } ``` 3. 😯，原来`Babel` 会先转译子节点，再转译父节点 4. 😯，原来React17不用 `import React` 是因为通过 `@babel/plugin-transform-react-jsx` 去自动引入 `react/jsx-runtime.js` 里面的 `jsx、jsxs` 等 5. 😯，原来要自定义 `jsx-runtime` ，可以加上配置 `importSource: 'YourPackage'` ，并在 `YourPackage/jsx-runtime` 下export出 `jsx、jsxs` 等 6. 😯，原来在 `createElement` 里面要处理 `children`，而在 `jsx` 里面，会直接在 `config.children` 里面得到 `children` ## 最后 ![教父.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75caf080f0f947fa96d1f66b793567c9~tplv-k3u1fbpfcp-watermark.image) > **感谢留下足迹，如果您觉得文章不错😄😄，还请动动手指😋😋，点赞+收藏+转发🌹🌹** ## 往期让React飞系列 [ **翻译翻译，什么叫ReactDOM.createRoot** ](https://juejin.cn/post/7004648498423398431)