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

    react创建元素的方法是什么

    藏色散人藏色散人2023-01-05 11:56:26原创118

    react创建元素的方法:1、使用JSX语法创建React元素,其语法如“const element = <h1>Hello, world</h1>;”;2、通过“React.createElement(type,props,children)”语法创建React元素。

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

    react创建元素的方法是什么?

    创建 react 元素

    React 元素

    React 元素(React element),它是 React 中最小的基本单位。React 元素其实就是一个简单的 JavaScript 对象(俗称:虚拟DOM),一个 React 元素对应界面上的一部分 DOM,描述了这部分 DOM 的结构及渲染效果。

    React 元素不是真实的 DOM 元素,所以没办法直接调用 DOM 上的原生 API。

    渲染过程:React 元素 描述 虚拟DOM ,再根据 虚拟DOM 渲染出真实的DOM。

    • 虚拟DOM:就是用 js 对象结构模拟出 html 中的 dom 结构,批量的增删改查先直接操作 js 对象,最后更新到真正的 DOM 树上。因为直接操作 js 对象的速度要比操作 DOM 的那些 api 要快。
    • React 元素就是 js 对象,它来告诉 React,你希望哪些东西显示再页面中。

    总的来说:

    元素就是用来描述 DOM 节点或者 React 组件的纯对象。元素可以在自己的属性中包含其它元素。创建一个元素的成本很低,一旦元素被创建之后,就不再发生变化。

    例如:我们使用 JSX 语法创建一个 React 元素 element

    const element = <h1 className='greeting'>Hello, world</h1>;

    在编译过程中,JSX 会被编译成对 React.createElement() 的调用,上面的例子编译后的结果为:

    const element = React.createElement(
        'h1',
        {className: 'greeting'},
        'Hello, world!'
    );

    最终,element 的值会被编译为类似下面的 js 对象

    const element = {
        type: 'h1',
        props: {
            className: 'greeting',
            children: 'Hello, world'
        },
        _context: Object,
        _owner: null,
        key: null,  
        ref: null, 
    }

    创建 React 元素的方法

    1.使用 JSX 语法

    const element = <h1>Hello, world</h1>;

    2.React.createElement(type,props,children)

    语法参数说明

    type:表示元素的类型,比如:h1、div、p等等。可以是

    • 字符串(如div、p、h1…)

    • 组件(自定义组件:构造函数创建的组件或class创建的组件;react 原生组件:React.Fragment等)

    props:表示该元素上的属性,使用 JavaScript 对象的方式表示

    children:表示该元素内部的内容,可以是文字,也可以继续嵌套另一个React.createElement(type,props,children)

    其中 children 可以是一个 React.createElement 列表,也可以写成多个参数:

      <script type="text/babel">
        const child1 = React.createElement("li",null,"one");
        const child2 = React.createElement("li",null,"two");
        const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);
    
        ReactDOM.render(
            content,
            document.getElementById("example")
        );
        //或者
        const child1 = React.createElement("li",null,"one");
        const child2 = React.createElement("li",null,"two");
        const content = React.createElement("ul",{className:"testStyle"},child1,child2);
    
        ReactDOM.render(
            content,
            document.getElementById("example")
        ); 
      </script>

    React.createElement 返回实例对象属性

    const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)
    推荐学习:《react视频教程

    以上就是react创建元素的方法是什么的详细内容,更多请关注php中文网其它相关文章!

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

    相关文章推荐

    • react 多个页面之间跳转怎么实现• react白屏原因是什么• react native怎么隐藏组件• react不能解析css怎么办• react 装饰器报错怎么办
    1/1

    PHP中文网