文章目录
一、什么是React？
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
- React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
- React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
二、React 的特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
高效的原因
·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
·DOM Diffing算法,最小化页面重绘
说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
三、React第一个实例
那么React该如何使用呢？下面就通过一个小案例来学习吧！
1、虚拟DOM
概念
- · 本质时Object类型的对象(一般对象)
- · 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么 多的属性(只有React需要的属性)
- · 虚拟DOM最终会被React转化为真实DOM,呈现在页面上
2、JSX创建虚拟DOM
准备容器
<div id='root'></div>引入react 文件
<!-- react核心库 --> <script src="../JS/react.development.js"></script> <!-- react扩展库 操作dom元素--> <script src="../Js/react-dom.development.js"></script> <!-- 把jsx语法转js --> <script src="../Js/babel.min.js"></script>创建虚拟DOM
const V_DOM=React.createElement('h1',{id:'title'},'hello react!'); ReactDOM.render(V_DOM,document.getElementById("root"));//渲染到页面
四、JSX语法
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。
1、 定义虚拟DOM时不要用引号。
错误形式：
let V_DOM = ‘<h1>hello,react</h1>’正确形式：
let V_DOM = <h1>hello,react</h1>
2、标签混入JS表达式需要用{ }
举例：
let str = "hello,react!"; let V_DOM = ( <h1><span>{str}</span></h1> )
3、className样式的类名
样式的类名指定不要用class,要用className
let V_DOM = ( <h1 className='demo'><span>我是文本内容</span></h1> )
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"));
5、只有一个根标签
错误形式：
let V_DOM = ( <h1 className='demo'><span style={ {color:'blue',fontSize:'30px'}}>我是文本内容</span></h1> <p>我是段落</p> )正确形式：
// 定义虚拟dom const V_DOM =( <div> <p style={ {color:'green',fontSize:'20px'}}>姓名:{realname}</p> <p className="myage">年龄:{age}</p> </div> ) ReactDOM.render(V_DOM, document.getElementById('root'));
6、标签必须闭合
举例：<input type=”text” name=’myname’ value=’’></input>
7、 标签首字母
·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。
·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。
8、 js表达式
一个表达式会产生一个值,可以放在任何一个需要值的地方，例如：
- · a
- ·a+b
- ·demo(1)
- ·arr.map(
- )
- ·function test(){}
语句:不能放在创建虚拟dom语句中
- · if(){}
- · for(){}
- · switch(){}
四、小练习
需求： 遍历数组信息并输出到页面上
<!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>渲染人员数据</title>
</head>
<body>
<div id="root"></div>
<script src="../JS/react.development.js"></script>
<script src="../JS//react-dom.development.js"></script>
<script src="../JS/babel.min.js"></script>
<script type="text/babel">
// 自定义人员数据
const persons = [
{ realname: 'Jack', age: 18 },
{ realname: 'Lucy', age: 20 },
{ realname: 'Tom', age: 21 },
{ realname: 'John', age: 25 }
]
// 定义虚拟dom
const V_DOM = (
<ul>
{
persons.map((item)=>{
return <li>姓名:{item.realname},年龄:{item.age}</li>
})
}
</ul>
)
ReactDOM.render(V_DOM, document.getElementById('root'));
</script>
</body>
</html>