目录
一：简介
1.1 概念
React是用于构建用户界面的JavaScript库（只关注视图），起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
1.2 特点
声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。
组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
Css html js 封装一个组件
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。
1.3 高效的原因
·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
·DOM Diffing算法,最小化页面重绘
说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。
二：虚拟DOM
2.1 概念
· 本质时Object类型的对象(一般对象)
· 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性)
· 虚拟DOM最终会被React转化为真实DOM,呈现在页面上
2.2 创建虚拟DOM
JS创建虚拟DOM
<!-- 引入react核心库 -->
<script src="js/react.development.js"></script>
<!-- 扩展库 操作DOM -->
<script src="js/react-dom.development.js"></script>
<!-- 把jsx语法转js -->
<script src="js/babel.min.js"></script>准备容器
<div id=”hello”></div>创建虚拟DOM
const V_DOM=React.createElement('h1',{id:'title'},'hello react!');
ReactDOM.render(V_DOM,document.getElementById("hello"));//渲染到页面JSX创建虚拟DOM
let V_DOM = <h1>hello,react!</h1>
ReactDOM.render(V_DOM,document.getElementById("hello"));说明：
· You are using the in-browser Babel transformer. Be sure to precompile..... babel的一个警告：你正在使用浏览器翻译babel，请确定不在生产环境中。
· jsx 就是让创建虚拟DOM变得更有层次，更简洁。
三：JSX语法
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。
3.1 定义虚拟DOM时不要用引号。
//错误形式：
let V_DOM = ‘<h1>hello,react</h1>’;3.2 标签混入JS表达式需要用{}
//举例：
let str = "hello,react!";
let V_DOM = (
<h1><span>{str}</span></h1>
)3.3 className样式的类名
//样式的类名指定不要用class,要用className
let V_DOM = (
<h1 className='demo'><span>我是文本内容</span></h1>
)3.4 内联样式
//要用style={
{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。
let V_DOM = (
<h1 className='demo'><span style={
{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1>
)
ReactDOM.render(V_DOM,document.getElementById("hello"));3.5 只有一个根标签
//错误形式：
let V_DOM = (
<h1 className='demo'><span style={
{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1>
<p>我是段落</p>
)3.6 标签必须闭合
//举例：
<input type=”text” name=’myname’ value=’’></input>3.7 标签首字母
·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。
·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。
3.8 js表达式
一个表达式会产生一个值,可以放在任何一个需要值的地方
· a
·a+b
·demo(1)
·arr.map(
)
·function test(){}
语句:不能放在创建虚拟dom语句中
· if(){}
· for(){}
· switch(){}
四、 JSX练习
遍历数组并输出到页面上
<!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>
</head>
<body>
<div id="root">
</div>
<!-- 引入react核心库 -->
<script src="js/react.development.js"></script>
<!-- 引入操作dom的扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 引入babel来解析jsx语法 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
const person=[
{realname:'张三',age:'18'},
{realname:'李四',age:'20'}
]
const V_DOM=(
<ul>
{
person.map((item,index)=>{
return <li key={index}>姓名：{item.realname}年龄：{item.age}</li>
})
}
</ul>
)
ReactDOM.render(V_DOM,document.getElementById('root'))
</script>
</body>
</html> 