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 = 
Hello, world
;

在编译过程中，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 = 
Hello, world
;

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 列表,也可以写成多个参数：

React.createElement 返回实例对象属性

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)