• 技术文章 >web前端 >前端问答

    react element什么意思

    藏色散人藏色散人2023-01-18 16:05:36原创62

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

    本教程操作环境:Windows10系统、react16.9.0版、Dell G3电脑。

    react element什么意思?

    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函数的入参有三个,或者说三类。

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

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

      • 方法就是functional Component

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


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

    通过这篇文章,我们了解到,JSX中的HTML节点,在Babel的帮助下,转换为嵌套的ReactElement对象,这些信息对于后期构建应用的树结构时非常重要的,而React通过提供这些类型的数据,来脱离平台的限制。

    推荐学习:《react视频教程

    以上就是react element什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ReactElement
    上一篇:react怎么改字体 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react改变数组页面没有刷新怎么办• react路由跳转不刷新怎么办• react打包图片路径错误怎么办• react引入antd报错怎么办• react怎么改字体
    1/1

    PHP中文网