react怎样创建元素

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

导读： 　　这篇文章主要介绍“react怎么创建元素”，在日常操作中，相信很多人在react怎么创建元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答&rd

　　这篇文章主要介绍“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)

（编辑：源码网）

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