> 1. 本篇已收录到掘金专栏[《React 基础与进阶》](https://juejin.cn/column/7142674773930147853)，该系列目前一共 16 篇。 > > 2. 欢迎围观我的[“朋友圈”](https://yayujs.com)、加入[“低调务实优秀中国好青年”](https://www.yuque.com/yayu/nice-people/xou8qr)前端社群，分享技术，带你成长。 ## React 与 Babel ### 元素标签转译用过 React 的同学都知道，当我们这样写时： ```jsx

bar

``` Babel 会将其转译为： ```javascript React.createElement("div", {id: "foo"}, "bar"); ``` 我们会发现，`createElement` 的第一个参数是元素类型，第二个参数是元素属性，第三个参数是子元素 ### 组件转译如果我们用的是一个组件呢？ ```javascript function Foo({id}) { return

foo

}

bar

``` Babel 则会将其转译为： ```javascript function Foo({id}) { return React.createElement("div", {id: id}, "foo")} React.createElement(Foo, {id: "foo"}, React.createElement("div", {id: "bar"}, "bar") ); ``` 我们会发现，`createElement` 的第一个参数传入的是变量 `Foo` ### 子元素转译如果我们有多个子元素呢？ ```javascript

bar

baz

qux

``` Babel 则会将其转译为： ```javascript React.createElement("div", { id: "foo"}, React.createElement("div", {id: "bar"}, "bar"), React.createElement("div", {id: "baz"}, "baz"), React.createElement("div", {id: "qux"}, "qux") ); ``` 我们会发现，子元素其实是作为参数不断追加传入到函数中 ## createElement 那 React.createElement 到底做了什么呢？ ### 源码我们查看 React 的 GitHub 仓库：，查看 `pacakges/react/index.js`文件，可以看到 `createElement` 的定义在 `./src/React`文件： ```javascript // 简化后 export {createElement} from './src/React'; ``` 我们打开 `./src/React.js`文件： ```javascript import { createElement as createElementProd } from './ReactElement'; const createElement = __DEV__ ? createElementWithValidation : createElementProd; export { createElement }; ``` 继续查看 `./ReactElement.js`文件，在这里终于找到最终的定义，鉴于这里代码较长，我们将代码极度简化一下： ```javascript const RESERVED_PROPS = { key: true, ref: true, __self: true, __source: true, }; export function createElement(type, config, ...children) { let propName; // Reserved names are extracted const props = {}; // 第一段 let key = '' + config.key; let ref = config.ref; let self = config.__self; let source = config.__source; // 第二段 for (propName in config) { if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { props[propName] = config[propName]; } } // 第三段 props.children = children; // 第四段 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, self, source, ReactCurrentOwner.current, props, ); } ``` 这里可以看出，`createElement` 函数主要是做了一个预处理，然后将处理好的数据传入 `ReactElement` 函数中，我们先分析下 createElement 做了什么。 ### 函数入参我们以最一开始的例子为例： ```javascript

bar

// 转译为 React.createElement("div", {id: "foo"}, "bar"); ``` 对于`createElement` 的三个形参，其中`type` 表示类型，既可以是标签名字符串（如 div 或 span），也可以是 React 组件（如 Foo） `config` 表示传入的属性，`children` 表示子元素 ### 第一段代码 \_\_self 和 \_\_source 现在我们开始看第一段代码： ```javascript // 第一段 let key = '' + config.key; let ref = config.ref; let self = config.__self; let source = config.__source; ``` 可以看到在 `createElement` 函数内部，`key`、`ref`、`__self`、`__source` 这四个参数是单独获取并处理的，`key` 和 `ref` 很好理解，`__self` 和 `__source` 是做什么用的呢？通过这个 [issue](https://github.com/alangpierce/sucrase/issues/232)，我们了解到，`__self` 和 `__source` 是 `babel-preset-react`注入的调试信息，可以提供更有用的错误信息。我们查看 [babel-preset-react 的文档](https://www.babeljs.cn/docs/babel-preset-react)，可以看到： > **development** > > boolean 类型，默认值为 false. > 这可以用于开启特定于开发环境的某些行为，例如添加 \_\_source 和 \_\_self。 > 在与 env 参数配置或 js 配置文件配合使用时，此功能很有用。如果我们试着开启 `development` 参数，就会看到 `__self` 和 `__source` 参数，依然以 `

bar

` 为例，会被 Babel 转译成： ```javascript var _jsxFileName = "/Users/kevin/Desktop/react-app/src/index.js"; React.createElement("div", { id: "foo", __self: this, __source: { fileName: _jsxFileName, lineNumber: 5, columnNumber: 13 } }, "bar"); ``` ### 第二段代码 props 对象现在我们看第二段代码： ```javascript // 第二段 for (propName in config) { if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { props[propName] = config[propName]; } } ``` 这段代码实现的功能很简单，就是构建一个 props 对象，去除传入的 `key`、`ref`、`__self`、`__source`属性，这就是为什么在组件中，我们明明传入了 `key` 和`ref`，但我们无法通过 `this.props.key` 或者 `this.props.ref` 来获取传入的值，就是因为在这里被去除掉了。而之所以去除，React 给出的解释是，`key` 和 `ref` 是用于 React 内部处理的，如果你想用比如 key 值，你可以再传一个其他属性，用跟 key 相同的值即可。 ### 第三段代码 children 现在我们看第三段代码，这段代码被精简的很简单： ```javascript // 第三段 props.children = children; ``` 这是其实是因为我们为了简化代码，用了 ES6 的扩展运算法，实际的源码里会复杂且有一些差别： ```javascript 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; } ``` 我们也可以发现，当只有一个子元素的时候，`children` 其实会直接赋值给 `props.children`，也就是说，当只有一个子元素时，children 是一个对象（React 元素），当有多个子元素时，children 是一个包含对象（React 元素）的数组。 ### 第四段代码 defaultProps 现在我们看第四段代码： ```javascript // 第四段 if (type && type.defaultProps) { const defaultProps = type.defaultProps; for (propName in defaultProps) { if (props[propName] === undefined) { props[propName] = defaultProps[propName]; } } } ``` 这段其实是处理组件的`defaultProps`，无论是函数组件还是类组件都支持 `defaultProps`，举个使用例子： ```javascript // 函数组件 function Foo({id}) { return

foo

} Foo.defaultProps = { id: 'foo' } // 类组件 class Header extends Component { static defaultProps = { id: 'foo' } render () { const { id } = this.props return

foo

} } ``` ### 第五段代码 owner 现在我们看第五段代码： ```javascript // 第五段 return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, ); ``` 这段就是把前面处理好的 `type`、`key` 等值传入 `ReactElement` 函数中，那 `ReactCurrentOwner.current`是个什么鬼？我们根据引用地址查看 `ReactCurrentOwner`[定义的文件](https://github.com/facebook/react/blob/main/packages/react/src/ReactCurrentOwner.js)： ```javascript /** * Keeps track of the current owner. * * The current owner is the component who should own any components that are * currently being constructed. */ const ReactCurrentOwner = { /** * @internal * @type {ReactComponent} */ current: null, }; export default ReactCurrentOwner; ``` 其初始的定义非常简单，根据注释，我们可以了解到 `ReactCurrentOwner.current` 就是指向处于构建过程中的组件的 owner，具体作用在以后的文章中还有介绍，现在可以简单的理解为，它就是用于记录临时变量。 ## ReactElement ### 源码现在我们开始看 ReactElement 函数，其实这个函数的内容更简单，代码精简后如下： ```javascript const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, }; return element; }; ``` 如你所见，它就是返回一个对象，这个对象包括 `$$typeof`、`type`、`key` 等属性，这个对象就被称为 “React 元素”。它描述了我们在屏幕上看到的内容。React 会通过读取这些对象，使用它们构建和更新 DOM ### REACT\_ELEMENT\_TYPE 而 `REACT_ELEMENT_TYPE` 查看引用的 `packages/shared/ReactSymbols` [文件](https://github.com/facebook/react/blob/main/packages/shared/ReactSymbols.js)，可以发现它就是一个唯一常量值，用于标示是 React 元素节点 ```javascript export const REACT_ELEMENT_TYPE = Symbol.for('react.element'); ``` 那还有其他类型的节点吗？查看这个定义 `REACT_ELEMENT_TYPE` 的文件，我们发现还有： ```javascript export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal'); export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment'); export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode'); export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler'); export const REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider'); export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context'); // ... ``` 你可能会自然的理解为 `$$typeof` 还可以设置为 `REACT_FRAGMENT_TYPE`等值。我们可以写代码实验一下，比如使用 Portal，打印一下返回的对象： ```javascript import ReactDOM from 'react-dom/client'; import {createPortal} from 'react-dom' const root = ReactDOM.createRoot(document.getElementById('root')); function Modal() { const portalObject = createPortal(

foo

, document.getElementById("root2")); console.log(portalObject) return portalObject } root.render(); ``` 打印的对象为： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dba4254b63a44919ad9891b1430e17ab~tplv-k3u1fbpfcp-zoom-1.image#?w=1636\&h=232\&s=88693\&e=png\&b=202124) 它的 `$$typeof` 确实是 `REACT_PORTAL_TYPE` 而如果我们使用 `Fragment`： ```javascript import ReactDOM from 'react-dom/client'; import React from 'react'; const root = ReactDOM.createRoot(document.getElementById('root')); function Modal() { const fragmentObject = (

foo

); console.log(fragmentObject) return fragmentObject } root.render(); ``` 打印的对象为： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ffe998085da45978843a9c3973c8d97~tplv-k3u1fbpfcp-zoom-1.image#?w=1572\&h=372\&s=121863\&e=png\&b=202124) 我们会发现，当我们使用 `fragment` 的时候，返回的对象的 `$$typeof` 却依然是 `REACT_ELEMENT_TYPE` 这是为什么呢? 其实细想一下我们使用 portals 的时候，我们用的是 `React.createPortal` 的方式，但 `fragments` 走的依然是普通的 `React.createElement` 方法，`createElement` 的代码我们也看到了，并无特殊处理 `$$typeof` 的地方，所以自然是 `REACT_ELEMENT_TYPE` 那么 `$$typeof` 到底是为什么存在呢？其实它主要是为了处理 web 安全问题，试想这样一段代码： ```javascript let message = { text: expectedTextButGotJSON }; // React 0.13 中有风险

{message.text}

``` 如果 `expectedTextButGotJSON`是来自于服务器的值，比如： ```javascript // 服务端允许用户存储 JSON let expectedTextButGotJSON = { type: 'div', props: { dangerouslySetInnerHTML: { __html: '/* something bad */' }, }, // ... }; let message = { text: expectedTextButGotJSON }; ``` 这就很容易受到 XSS 攻击，虽然这个攻击是来自服务器端的漏洞，但使用 React 我们可以处理的更好。如果我们用 Symbol 标记每个 React 元素，因为服务端的数据不会有 `Symbol.for('react.element')`，React 就可以检测 `element.$$typeof`，如果元素丢失或者无效，则可以拒绝处理该元素，这样就保证了安全性。 ## 回顾至此，我们完整的看完了 `React.createElement` 的源码，现在我们再看 React 官方文档的这段：以下两种示例代码完全等效： ```javascript const element = (

Hello, world!

); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); ``` React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象： ```javascript // 注意：这是简化过的结构 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; ``` 这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。现在你对这段是不是有了更加深入的认识？ ## React 系列该系列带大家从源码的角度深入理解 React 的各个 API 和执行过程。本篇已收录到掘金专栏[《React 基础与进阶》](https://juejin.cn/column/7142674773930147853)。该系列目前一共 16 篇。此外我还写过 [JavaScript 系列](https://juejin.cn/column/7035531575974592520)、[TypeScript 系列](https://juejin.cn/column/7029490086710345742)、[React 系列](https://juejin.cn/column/7142674773930147853)、[Next.js 系列](https://juejin.cn/column/7343569488744611849)、[冴羽答读者问](https://juejin.cn/column/7039526067891077151)等 14 个系列文章，全系列文章目录：通过文字建立交流本身就是一种缘分，欢迎围观我的[“朋友圈”](https://yayujs.com)、加入[“低调务实优秀中国好青年”](https://www.yuque.com/yayu/nice-people/xou8qr)前端社群，分享技术，带你成长。