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 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, }
const element = <h1>Hello, world</h1>;
语法参数说明
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>
const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)推荐学习:《react视频教程》
以上就是react创建元素的方法是什么的详细内容,更多请关注php中文网其它相关文章!
已抢64983个
抢已抢27431个
抢已抢14926个
抢已抢7430个
抢已抢9384个
抢已抢18981个
抢