引入时必须讲究顺序,react.js要在react-dom.js之前
1 <script type="text/javascript" src="../js/react.development.js"></script>2 3 <script type="text/javascript" src="../js/react-dom.development.js"></script>4 5 <script type="text/javascript" src="../js/babel.min.js"></script>
或使用CDN引入
1 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>2 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>3 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>1.2.2 使用React
不使用脚手架直接html文件里引入
(资料图)
1 2 3 4 5hello_react 6 7 8 9 10 11 12 <script type="text/javascript" src="../js/react.development.js"></script>13 14 <script type="text/javascript" src="../js/react-dom.development.js"></script>15 16 <script type="text/javascript" src="../js/babel.min.js"></script>17 18 <script type="text/babel" > /* 此处一定要写babel */19 //1.创建虚拟DOM20 const VDOM =Hello,React
/* 此处一定不要写引号,因为不是字符串 */21 //2.渲染虚拟DOM到页面22 ReactDOM.render(VDOM,document.getElementById("test"))23 </script>24 25
效果图如下,可以看到已经完成渲染
1.2.3虚拟DOM与真实DOM介绍中提到,react的优势有通过diff算法减少页面的重绘和重排来提升性能,所以就需要虚拟DOM的使用。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。
关于虚拟DOM:
本质是Object类型的对象(一般对象)虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。虚拟DOM最终会被React转化为真实DOM,呈现在页面上。1 const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */ 21.2.4 创建虚拟DOM的两种方式3 Hello,React 4
5 ) 6 //2.渲染虚拟DOM到页面 7 ReactDOM.render(VDOM,document.getElementById("test")) 8 9 const TDOM = document.getElementById("demo")10 console.log("虚拟DOM",VDOM);11 console.log("真实DOM",TDOM);
1.纯JS式(不推荐)
React提供了一些API来创建一种 “特别” 的一般js对象 ,下面创建的就是一个简单的虚拟DOM对象
const VDOM = React.createElement("标签",{属性名1:属性值1,属性名2:属性值2},"内容")
但是大多数时候创建元素时都会遇到多层元素嵌套,比如下面的代码,一个h1标签里面装着一个span标签,就需要2次调React.createElement()方法,如果层数更多将非常不方便,而且对于查看内部的元素结构也非常不方便
const VDOM = React.createElement("h1",{id:"title"},React.createElement("span",{},"Hello,React"))
2.JSX方式
创建同样的结构,明显JSX更加清晰简单
1 <script type="text/babel" > /* 此处一定要写babel */ 2 //1.创建虚拟DOM 3 const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */ 45 Hello,React 6
7 ) 8 //2.渲染虚拟DOM到页面 9 ReactDOM.render(VDOM,document.getElementById("test"))10 </script>
因为这里是JSX语法,不是普通的JS语法,所以书写的时候有一些差异,比如html结构不加引号直接可以写在里面作为虚拟DOM。
JSX语法规则
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。4.内联样式,要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。以下是JSX语法操作样式和属性的例子,对于back这个类,直接在ul中使用字符串对className属性进行赋值。列表渲染,需要形成一个数组,所以使用大括号包裹数组的方式,{ arr },数组的具体内容是多个1 6 7 8 9 10 <script type="text/babel">11 const data = ["Vue", "React", "Angular"]12 const VDom = (13