02-React v18创建元素

一、引入React v18

<script src="https://unpkg.com/react@18.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.1/umd/react-dom.development.js"></script>

二、HTML代码

<div id="main"></div>

三、 React v18创建元素

知识点

1.React.createElement(a,b,c) 生成DOM结构

• 第一个参数 a：表示元素的类型，比如：h1, div 等。

• 第二个参数 b：表示该元素上的属性，使用 JavaScript 对象方式表示。

• 第三个参数 c：表示该元素内部的内容，可以是文字，可以继续嵌套另外一个 React.createElement(a, b, c)。

【注：】这种方法在实际开发中几乎不会使用，因为可以直接使用JSX方法

2.ReactDOM.createRoot() 生成React根元素对象 (v18)

3.在React中class 类 以 className 替代

4.ReactDOM.render() 方法一般值调用一次，所以需要提前将想要渲染的元素拼接好，一次性渲染

方法1 React.createElement()

let p = React.createEleemnt("p", { className: "p", id: "p" }, "段落标签");
console.log(p); //输出react 的DOM 

方法2 ReactDOM.createRoot()

let root = ReactDom.createRoot(document.getElementById("main"));
root.render(p);
let p1 = React.createEleemnt("div", {className: "p", id: "p" }, "段落标签");
root.render(p1);

一次性渲染

// 在React中 class类要写成className
let p = React.createElement("p", {className: "p",id: "p"}, "段落标签");
let span = React.createElement("span", {className: "s", id: "s"}, "行标签");
let div = React.createElement("p", {className: "left", }, span, p);
let root = ReactDOM.createRoot(document.getElementById("main"));
root.render(div);

四、总结

以上写法属于命令式语法，如果想要使用生命是语法，只有采用JSX