React：一、初识react
1 前言
1.1 官网
（1）英文官网：https://reactjs.org/
（2）中文官网：https://react.docschina.org/
1.2 介绍
（1）动态构建用户界面的javaScript库
（2）FaceBook开源
1.3 特点
（1）声明式编程
（2）组件化编码
（3）React Native编写原生应用
（4）高效（优秀的Diffing算法）
1.4 React高效原因
（1）使用虚拟（virtual）DOM，不总是直接操作页面真实DOM。
（2）DOM Diffing算法，最小化页面重绘。
新建文件夹，使用vscode打开该文件夹，快捷键ctrl+` （Tab键上方）打开terminal终端，输入命令：
1.5 相关js库
（1）react.js：React核心库
（2）react-dom.js：提供操作DOM的react扩展库
（3）babel.js：解析JSX语法代码，转为JS代码的库
npm i react react-dom
两个包安装成功：
目录结构如下：
2 使用
非脚手架搭建react：
文件结构：
2.1 引入react、react-dom、babel-min这几个js文件
因为是开发环境，所以全部引入development.js即可（注意引入顺序：先引入react，再引入react-dom）：
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
文件整体目录如下：
注意：
js中，混合写入类似于HTML的语法，叫做jsx语法。因为react会使用到jsx语法，故而还需下载babel-standalone（babel除了在使用import时，具有将ES6转换成ES5的作用，还有将jsx转换成js的作用）：
注意引入的顺序：1 react；2 react-dom；3 babel-min ，（核心库react必须在react-dom库之前）修改如下：
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
2.2 创建react元素
<script type="text/babel"> //此处type一定要写babel
//创建虚拟dom
const title = React.createElement('h1',null,'Hello React')
const a=<h1>你好~</h1> //jsx语法,标签不要加双引号，因为不是字符串
//渲染虚拟dom到页面
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(a,document.getElementById("root"))
ReactDOM.render(title,document.getElementById("myfreind"))
</script>
2.3 渲染React元素到页面中
<!-- 2 手动创建页面待展示的元素，vscode快捷键：#root+enter -->
<!-- 创建"容器" -->
<div id="root"></div>
<div id="myfreind"></div>
2.4 index.html如下
<!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>Document</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 2 手动创建页面待展示的元素，vscode快捷键：#root+enter -->
<!-- 创建"容器" -->
<div id="root"></div>
<div id="myfreind"></div>
<!-- 3 创建react元素
参数一：元素名称；参数二：元素属性；参数三：元素的子节点
-->
<!-- 4 渲染react元素
参数一：要渲染的react元素；参数二：挂载点
-->
<script type="text/babel"> //此处type一定要写babel
//创建虚拟dom
const title = React.createElement('h1',null,'Hello React')
const a=<h1>你好~</h1> //jsx语法,标签不要加双引号，因为不是字符串
//渲染虚拟dom到页面
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(a,document.getElementById("root"))
ReactDOM.render(title,document.getElementById("myfreind"))
</script>
</body>
</html>
2.5 浏览器中效果如下
3 虚拟DOM的两种创建方式
（1）定义常量标签（无单双引号的）
修改如上的方式（针对a常量标签修改），body：
<div id="root"></div>
<div id="myfreind"></div>
<script type="text/babel"> //此处type一定要写babel
//创建虚拟dom
const title = React.createElement('h1',null,'Hello React')
const a=<h1 id="nihao">你好~</h1> //jsx语法,标签不要加双引号
//渲染虚拟dom到页面
ReactDOM.render(a,document.getElementById("root"))
ReactDOM.render(title,document.getElementById("myfreind"))
</script>
效果一致：
（2）React.createElement(标签名，标签属性，标签内容)创建虚拟DOM
对于标签属性，是一个js对象（形如java的map），可以有id、className等属性。body：
<div id="root"></div>
<div id="myfreind"></div>
<script type="text/babel"> //此处type一定要写babel
//创建虚拟dom
const title = React.createElement("h1",{id:"test",className:"text_line"},"我是大侠")
//渲染虚拟dom到页面
ReactDOM.render(title,document.getElementById("myfreind"))
</script>
但是注意，有些情况下，第一种方式更优：比如希望在h1标签中，嵌入< span id=“mm”>Hello</ span>标签，两种方式分别如下操作，body：
<div id="method1"></div>
<div id="method2"></div>
<script type="text/babel"> //此处type一定要写babel
const m1=<h1><span id="mm">Hello</span></h1>
const m2=React.createElement("h1",{},'<span id="mm">Hello</span>')
ReactDOM.render(m1,document.getElementById("method1"))
ReactDOM.render(m2,document.getElementById("method2"))
</script>
很明显如上方式是把< span id=“mm”>Hello</ span>作为了标签的内容，而不是一个虚拟DOM。
应该修改为如下方式：
<div id="method1"></div>
<div id="method2"></div>
<script type="text/babel"> //此处type一定要写babel
const m1=<h1><span id="mm">Hello</span></h1>
const m2=React.createElement("h1",{},React.createElement("span",{id:"mm"},"Hello"))
ReactDOM.render(m1,document.getElementById("method1"))
ReactDOM.render(m2,document.getElementById("method2"))
</script>
由此可见，这种情况下，多层嵌套的React.createElement并不适用复杂场景。jsx写法（第一种）更加便捷高效，不建议React.createElement中嵌套React.createElement。
小结：
1.为什么react要使用jsx？
减少创建虚拟DOM的繁琐操作，可以如同编写html那样渲染到页面上
比如下面的jsx写法，实际上babel最终会把下面的语句，翻译为React.createElement中嵌套React.createElement这种形式的，其实jsx这种写法，就是原始js创建虚拟DOM的语法糖（语法糖：类似python的装饰器语法糖等，就是一种语法的缩写、简写方式）：
//创建xuniDOM
const m3=(
<h1>
<span id="mm">Hello</span>
</h1>
)
2.关于虚拟DOM：
本质上是Object类型的对象(一般对象)；
虚拟DOM比较轻，真实DOM较重，因虚拟DOM为React内部使用，无需真实DOM那么多属性；
虚拟DOM最终会被React转化为真实DOM呈现在页面上。
4 jsx语法规则
（1）全称： javascriptXML
（2）react定义的一种类似于XML的JS扩展语法：JS+XML
（3）本质是 React.craeteElement(components，props，…children)
（4）作用：简化虚拟DOM创建
写法： var a = < h1>hello</ h1>
注意1：它不是字符串，也不是HTML/XML标签
注意2：产生的是一个JS对象
（5）标签名任意：HTML标签或其他标签
<!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>jsx语法</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "hello,jsx语法"
const VDOM = (
<h2 id = {xiaoxuId.toLowerCase()}>
<span>{data.toLowerCase()}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
tips：debug方式：
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "hello,jsx语法"
const VDOM = (
<h2 id = {xiaoxuId.toLowerCase()}>
<span>{data.toLowerCase()}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
debugger;
</script>
</body>
样式填充：
以前的方式：
<!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>jsx语法</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<style>
.title{
background-color: aquamarine;
width: 200px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "Hello,jsx语法"
const VDOM = (
<h2 id = {xiaoxuId.toLowerCase()} class = "title">
<span>{data.toLowerCase()}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
修改如下：
内联样式：
<!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>jsx语法</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<style>
.title{
background-color: aquamarine;
width: 200px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "Hello,jsx语法"
const VDOM = (
<h2 id = {xiaoxuId.toLowerCase()} className = "title"
style = {{color:'green',fontSize:"20px"}}>
<span>{data.toLowerCase()}</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式：style = {{key:value}}
*/
</script>
</body>
</html>
虚拟DOM，只有一个根标签，且标签必须闭合：
<!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>jsx语法</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<style>
.title{
background-color: aquamarine;
width: 200px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "Hello,jsx语法"
const VDOM = (
<div>
<h2 id = {xiaoxuId.toLowerCase()} className = "title"
style = {{color:'green',fontSize:"20px"}}>
<span>{data.toLowerCase()}</span>
</h2>
<input type = "text"/>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式：style = {{key:value}}
5.只要一个根标签
6.标签必须闭合
*/
</script>
</body>
</html>
标签的首字母：
<!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>jsx语法</title>
<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<style>
.title{
background-color: aquamarine;
width: 200px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
const xiaoxuId = "xiaoxu"
const data = "Hello,jsx语法"
const VDOM = (
<div>
<h2 id = {xiaoxuId.toLowerCase()} className = "title"
style = {{color:'green',fontSize:"20px"}}>
<span>{data.toLowerCase()}</span>
</h2>
<input type = "text"/>
<Fruit>123</Fruit>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式：style = {{key:value}}
5.只要一个根标签
6.标签必须闭合
7.标签首字母：
（1）若为小写字母开头，则将标签转为html中同名元素，若html中没有该标签对应的同名元素，则报错。
（2）若大写字母开头，react渲染对应的组件，若组件没有定义，则报错。
*/
</script>
</body>
</html>
注意区分js表达式和代码块，在jsx中，{}里只能存在表达式，而非代码块，常见的js表达式、代码块有如下：
1.表达式
（1）a
（2）a+b
（3）demo(24)
（4）arr.map()
（5）function test(){}
2.语句（代码）
（1）if(){}
（2）for(){}
（3）switch(value){case 1:…;case 2:…;}
<!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>Document</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src = "../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id = "test"></div>
<script type = "text/babel">
const data = ["java","python","react","vue"]
const vDOM = (
<div>
<ul>
{
data.map((item,index)=>{
return <li key = {index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(vDOM,document.getElementById("test"))
</script>
</body>
</html>
效果如下：
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
