1、传统的javaScript创建方式
调用方法：React.createElement(参数1,参数2,参数3)
参数1：创建的标签的名称——和HTML的标签同名
参数2：标签的属性——如：id等
参数3：填充标签的内容
<!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>Hello React</title> </head> <body> <!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <script type="text/javascript"> // 1、创建虚拟DOM const VDOM = React.createElement('h1',{id: 'title'},'Hello React') // 2、将虚拟DOM渲染到页面 ReactDOM.render(VDOM, document.getElementById('app')) </script> </body> </html>
注意：第二个参数在没有内容并且第三个参数有值的时候，第二个参数也要用{}来占位，不能省略。
2、jsx的创建方式
jsx的方式比较简单，直接创建DOM结构，最后交给react去渲染即可。
<!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>Hello React</title> </head> <body> <!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script> <!-- 此处类型为babel --> <script type="text/babel"> // 1、创建虚拟DOM const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串 // 2、将虚拟DOM渲染到页面 ReactDOM.render(VDOM, document.getElementById('app')) </script> </body> </html>
3、比较明显的区别
- 对于复杂的dom结构，js的方式需要方法嵌套，而jsx不需要。
- jsx的结构层次分明，而js的方式对于复杂的结构比较混乱，维护较困难。
- jsx代码简洁，js方式代码冗长。
4、jsx的语法规则
- 定义虚拟DOM时，不要写括号
- 标签中混入JS表达式时要用
{} - 内联样式，要用
style={{key：value}}的形式去写 - 只有一个根标签
- 标签必须闭合
- 标签首字母小写，则该标签会转为
html中同名元素，若html中无该标签对应的同名元素则报错 - 若标签首字母大写，
react就去渲染对应的组件，若组件没有定义，则报错
<!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>Hello React</title> <style> .title{ width: 100%; background-color: orange; } </style> </head> <body> <!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script> <!-- 此处类型为babel --> <script type="text/babel"> const myId = 'Genius' const myData = 'Hello,React' // 1、创建虚拟DOM const VDOM =( <div> <h2 className="title" id={myId.toLocaleLowerCase()}> <span style={{color:'white'}}>{myData.toLocaleLowerCase()}</span> </h2> <input type="0"/> </div> ) // 此处不能加引号，因为不是字符串 // 2、将虚拟DOM渲染到页面 ReactDOM.render(VDOM, document.getElementById('app')) </script> </body> </html>
