1.React元素
1.1 React.createElement()
React.createElement(type, [props], [...children]) - 用来创建React元素，React元素无法修改
1.2 ReactDOM.createRoot()
createRoot(container[, options]) - 用来创建React的根容器，容器用来放置React元素
1.3 root.render()
root.render(element)
当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。
不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM 节点中。
演示代码
需要下载和导入依赖 https://unpkg.com/[email protected]/umd/react.development.js，https://unpkg.com/[email protected]/umd/react-dom.development.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React01</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> </head> <body> <div id="root1"></div> <div id="root2"></div> <button id="trigger">Show Button</button> <script> //create <div> by DOM const div = document.createElement('div'); console.log(div); div.innerText = "this is a <div>"; const root1 = document.getElementById("root1"); root1.appendChild(div); // create <div> by React // params: 1.element name 2.element attribute 3.the child element of element const div2 = React.createElement("div", {}, "this is a <div> create by React"); console.log(div2); // create Root element const root2 = ReactDOM.createRoot(document.getElementById("root2")); // render div to root element root2.render(div2); /** update DOM by React, replace all element when need update */ const btn = document.getElementById("trigger"); btn.addEventListener('click', () => { const btn = React.createElement("button", { id: "btn2", className: "btn2", onClick: () => { confirm("go ahead!!!") } }, "New Button"); const div2 = React.createElement("div", {}, "this is a <div> create by React",btn); // render div to root element root2.render(div2); }); </script> </body> </html>
2.JSX
JSX是JavaScript 的语法扩展，JSX 使得我们可以以类似于HTML的形式去使用JS。JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为以调用React.createElement()创建元素的代码。由于JSX最终需要转换为JS代码执行，所以浏览器并不能正常识别JSX，所以当我们在浏览器中直接使用JSX时，还必须引入babel来完成对代码的编译。
演示代码
需要进入babel依赖，https://unpkg.com/babel-standalone@6/babel.min.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React01 JSX</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> </head> <body> <div id="root1"></div> <script type="text/babel"> const title = "use babel"; const content = "just demo jsx, and need import bable, setup script type='text/bable'"; const fn = () => "call funtion and get the return value"; const div = <div className="jsx"> <header style={{ fontSize: '20px' }}>{title}</header> <p>{content}</p> <textarea>{fn()}</textarea> </div>; const root = ReactDOM.createRoot(document.getElementById("root1")); root.render(div); </script> </body> </html>
JSX的注意事项：
1.html标签不要加引号
2.有且只有一个根标签
3.html标签小写开头，React组件大写开头
4.可以使用{}插入JS表达式。（表达式：有返回值的语句。JSX也是表达式）
5.属性正常写（class使用className，style必须用{}）
6.标签必须正常闭合
7.布尔类型、Null 以及 Undefined 将会忽略