react element代表什么

发布时间：2023-07-14 12:00:48 所属栏目：教程来源：未知

导读： 　　本篇内容介绍了“react element指的是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家

　　本篇内容介绍了“react element指的是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　react element是“React.createElement”函数的返回值，即ReactElement；ReactElement的结构是“const element = {Element    $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props,_owner: owner, };”。

　　React源码 | ReactElement

　　说到ReactElement，不得不提到的就是在React中，用来替代JavaScript（JS）的语言，JSX。

　　JSX

　　作为React的官方指定语法，JSX允许用户在JS代码中插入HTML代码。但是，这种写法浏览器是无法解析的。他们需要一个转换器，Babel就充当了这样一个角色，他在JSX代码编译时候将其转换成JS文件，这样浏览器就能解析了。

　　怎么转换呢，我们知道，JSX有JS和HTMl两种写法，本身就是JS写法的其实是不需要转换的，当然也不能说的这么绝对，有时候Babel会为了兼容性的缘故将高版本的语法翻译到低版本，这部分不在讨论范围。我们要关注的其实是HTMl的处理方式。

　　比如下面这行代码：

　　<div id='name'>Tom and Jerry</div>

　　通过Babel转换后生成的代码是：

　　React.createElement("div", {

　　    id: "name"}, "Tom and Jerry");

　　HTML语法转变成了JS语法，简单来说，我们所写的JSX最终变成了JS。

　　我们写一个复杂点的例子：

　　<div class='wrapper' id='id_wrapper'>

　　    <span>Tom</span>

　　    <span>Jerry</span></div>React.createElement("div", {

　　    class: "wrapper",

　　    id: "id_wrapper"

　　}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

　　转换规则是比较简单的，React.createElement的第一个参数是节点类型；第二个参数是该节点的属性，以key：value的形式作为一个对象，后面的所有参数都是该节点的子节点。

　　需要注意的是，在JSX语法中，我们不仅有原生的HTML节点，还有大量的自定义组件，比如：

　　function Comp() {

　　    return '<div>Tom and Jerry</div>'

　　}

　　<Comp></Comp>

　　function Comp() {

　　    return '<div>Tom and Jerry</div>';

　　}

　　React.createElement(Comp, null);

　　可以看出，React.createElement的第一个参数变成了一个变量，而不是一个字符串，尝试将函数Comp首字母小写：

　　function comp() {

　　    return '<div>Tom and Jerry</div>'

　　}

　　<comp></comp>

　　function comp() {

　　    return '<div>Tom and Jerry</div>';

　　}

　　React.createElement("comp", null);

　　React.createElement的第一个参数又变成了一个字符串。

　　这也就是我们在React中写组件的时候，为什么会要求首字母大写的原因，Babel在编译的时候会将首字母小写的组件视为原生的HTMl节点进行处理，如果我们将自定义组件首字母小写，后续的程序将无法识别这个组件，最终会报错。

　　ReactElement

　　通过Babel编译后的JS代码，频繁出现React.createElement这个函数。这个函数的返回值就是ReactElement，通过上面的示例可以看出，React.createElement函数的入参有三个，或者说三类。

　　type

　　type指代这个ReactElement的类型。

　　字符串比如div，p代表原生DOM，称为HostComponent

　　Class类型是我们继承自Component或者PureComponent的组件，称为ClassComponent

　　方法就是functional Component

　　原生提供的Fragment、AsyncMode等是Symbol，会被特殊处理

　　config

　　参照上面Babel编译后的代码，所有节点的属性都会以Key:Value的形式放到config对象中。

　　children

　　子节点不止会有一个，所以children不只有一个，从第二个参数以后的所有参数都是children，它是一个数组。

　　ReactElement的结构是这样的

　　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,

　　 };

　　它就是一个简单的对象，为了看清楚这个对象的创建规则，我们举个例子。首先是我们写的JSX：

　　<div class='class_name' id='id_name' key='key_name' ref='ref_name'>

　　    <span>Tom</span>

　　    <span>Jerry</span>

　　</div>

　　它会被Babel编译为：

　　React.createElement("div", {

　　    class: "class_name",

　　    id: "id_name",

　　    key: "key_name",

　　    ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

　　它会生成这样一个Element

　　{

　　    $$typeof: REACT_ELEMENT_TYPE,

　　    type：'div'，

　　    key: 'key_name',

　　    ref: "ref_name",

　　    props: {

　　        class: "class_name",

　　        id: "id_name",

　　        children: [

　　            React.createElement("span", null, "Tom"),

　　            React.createElement("span", null, "Jerry")

　　        ]

　　    }

　　     _owner: ReactCurrentOwner.current,}

　　$$typeof 是一个常量，所有通过React.createElement生成的元素都有这个值。一般使用 React 的组件都是挂到父组件的 this.props.children 上面，但是也有例外，比如要实现一个模态框，就需要将模态框挂载到body节点下，这个时候需要使用ReactDOM.createPortals(child, container)这个函数实现，这个函数生成的$$typeof值就是REACT_PORTAL_TYPE。

　　type指代这个ReactElement的类型

　　key和ref都是从config对象中找到的特殊配置，将其单独抽取出来，放在ReactElement下

　　props包含了两部分，第一部分是去除了key和ref的config，第二部分是children数组，数组的成员也是通过React.createElement生成的对象，示例中省略了这个步骤。

　　_owner在16.7的版本上是Fiber，Fiber是react16+版本的核心，暂时不做深究。

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!