您现在的位置是：网站首页> 编程资料编程资料

React前端开发createElement源码解读_React_

2023-05-24 875人已围观

简介 React前端开发createElement源码解读_React_

React 与 Babel

元素标签转译

用过 React 的同学都知道，当我们这样写时：

bar

Babel 会将其转译为：

React.createElement("div", {id: "foo"}, "bar");

我们会发现，createElement 的第一个参数是元素类型，第二个参数是元素属性，第三个参数是子元素

组件转译

如果我们用的是一个组件呢？

function Foo({id}) { return 
foo
 } 
bar

Babel 则会将其转译为：

function Foo({id}) { return React.createElement("div", {id: id}, "foo")} React.createElement(Foo, {id: "foo"}, React.createElement("div", {id: "bar"}, "bar") );

我们会发现，createElement 的第一个参数传入的是变量 Foo

子元素转译

如果我们有多个子元素呢？

bar
baz
qux

Babel 则会将其转译为：

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 仓库：github.com/facebook/re…，查看 pacakges/react/index.js文件，可以看到 createElement 的定义在 ./src/React文件：

// 简化后 export {createElement} from './src/React';

我们打开 ./src/React.js文件：

import { createElement as createElementProd } from './ReactElement'; const createElement = __DEV__ ? createElementWithValidation : createElementProd; export { createElement };

继续查看 ./ReactElement.js文件，在这里终于找到最终的定义，鉴于这里代码较长，我们将代码极度简化一下：

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 做了什么。

函数入参

我们以最一开始的例子为例：

bar
 // 转译为 React.createElement("div", {id: "foo"}, "bar");

对于createElement 的三个形参，其中type 表示类型，既可以是标签名字符串（如 div 或 span），也可以是 React 组件（如 Foo）

config 表示传入的属性，children 表示子元素

第一段代码 __self 和 __source

现在我们开始看第一段代码：

 // 第一段 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，我们了解到，__self 和 __source 是 babel-preset-react注入的调试信息，可以提供更有用的错误信息。

我们查看 babel-preset-react 的文档，可以看到：

development

boolean 类型，默认值为 false. 这可以用于开启特定于开发环境的某些行为，例如添加 __source 和 __self。 在与 env 参数 配置或 js 配置文件 配合使用时，此功能很有用。

如果我们试着开启 development 参数，就会看到 __self 和 __source 参数，依然以

bar
为例，会被 Babel 转译成：

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 对象

现在我们看第二段代码：

// 第二段 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

现在我们看第三段代码，这段代码被精简的很简单：

// 第三段 props.children = children;

这是其实是因为我们为了简化代码，用了 ES6 的扩展运算法，实际的源码里会复杂且有一些差别：

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

现在我们看第四段代码：

 // 第四段 if (type && type.defaultProps) { const defaultProps = type.defaultProps; for (propName in defaultProps) { if (props[propName] === undefined) { props[propName] = defaultProps[propName]; } } }

这段其实是处理组件的defaultProps，无论是函数组件还是类组件都支持 defaultProps，举个使用例子：

// 函数组件 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

现在我们看第五段代码：

 // 第五段 return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, );

这段就是把前面处理好的 type、key 等值传入 ReactElement 函数中，那 ReactCurrentOwner.current是个什么鬼？

我们根据引用地址查看 ReactCurrentOwner定义的文件：

/** * 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 函数，其实这个函数的内容更简单，代码精简后如下：

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; };

如你所见，它就是返回一个对象，这个对象包括

上一篇：vue实现前端展示后端实时日志带颜色示例详解_vue.js_

下一篇：基于JavaScript实现电子签名功能_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网