react怎么创建元素

这篇文章主要介绍“react怎么创建元素”，在日常操作中，相信很多人在react怎么创建元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react怎么创建元素”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

react创建元素的方法：1、使用JSX语法创建React元素，其语法如“const element = <h2>Hello, world</h2>;”；2、通过“React.createElement(type,props,children)”语法创建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 = <h2 className='greeting'>Hello, world</h2>;

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

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

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

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

创建 React 元素的方法

1.使用 JSX 语法

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

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

语法参数说明

type：表示元素的类型，比如：h2、div、p等等。可以是

• 字符串（如div、p、h2…）

• 组件（自定义组件：构造函数创建的组件或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怎么创建元素”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！