先上示例，注意其中的注释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test1"></div> <div id="test2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/javascript"> const msg = 'I like react!' const myId = 'test'; //**流程不变** //1、创建虚拟DOM-不使用jsx的情况 const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase()); debugger //打断点查看 //2、渲染虚拟DOM ReactDOM.render(vDom1,document.getElementById('test1')); </script> <script type="text/babel"> //**流程不变** //1、创建虚拟DOM-使用jsx的情况 const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3> //**JSX写法标签不能加单/双引号，否则就成了字符串，其最终会转换成js对象** //2、渲染虚拟DOM ReactDOM.render(vDom2,document.getElementById('test2')); </script> </body> </html>
记住流程：
- 1、创建虚拟DOM
- 2、渲染虚拟DOM
为何要使用虚拟DOM？
虚拟DOM优势：
- 轻；
- 只在渲染时发生重绘，更改时不发生重绘。
JSX——javascript XML
- 可使用html标签；
- 还可使用自定义标签——组件标签；
- 注意：只要用了JSX，都加加上
type="text/babel"
渲染虚拟DOM元素
- 语法：
ReactDOM.render(virtualDOM,containerDOM);
建立虚拟DOM——2种方式
//第一种（不推荐） const vDom = React.createElement('h1',{id:myId},msg);
//第二种（推荐） const vDom = <h1 id='myId'>{msg}</h1>
若对虚拟DOM想进一步了解，可查看另一篇文章《浅析虚拟DOM》
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>展示列表</h1> <h2>关键：将一个数据的数组转换为一个标签的数组——map()</h2> <div id="test1"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> const arrs = ['react','vue','angular','jquery','backbone']; //流程不变 //1、创建虚拟DOM const vDom_ul = ( <ul> { arrs.map((arr,index)=><li key={index}>{arr}</li>) } </ul> ) //2、渲染虚拟DOM ReactDOM.render(vDom_ul,document.getElementById('test1')); </script> </body> </html>
