day17
一、介绍
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
官网：https://react.docschina.org/
1.优点
(1)跨浏览器兼容
(2)一切皆组件
(3)单向数据流动
(4)虚拟DOM，运行速度非常快
(5)JSX语法糖
2.缺点
React不是完整的MVC框架，需要结合flux或者redux来开发大型项目
二、起步
1.获取核心库
react核心库
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
reactDOM核心库
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
2.基本使用
示例代码：
三、jsx语法糖
jsx（Javascript和XML），是FaceBook专门为React框架开发的一套语法糖
jsx是一种js语法的扩展，允许html和js混写
jsx语法糖具有结构清晰、增加js语义、抽象程度高、屏蔽DOM操作、语言跨平台等特点
规律：遇到<解析成html语法，遇到{解析成js语法。
{ } 花括号中，可以写单行js语法，也可以写成一个匿名函数
1.引入babel.js文件
<script src="./js/babel.min.js"></script>
2.设置script标签的type属性
<script type="text/babel"></script>
3.使用jsx语法糖来创建虚拟DOM
var els = <div>
<h1>纸上得来终觉浅</h1>
<h2>绝知此事要躬行</h2>
</div>
4.遍历循环
<script type="text/babel">
var arr = [
{ id:100001,goodsname:'小米手机',price:3999 },
{ id:100002,goodsname:'笔记本电脑',price:5999 },
{ id:100003,goodsname:'冰箱',price:4999 }
]
var uls = (<ul>
{
arr.map(item=>{
return(
<li key={ item.id }>
<p>商品编号：{ item.id }</p>
<p>商品名称：{ item.goodsname }</p>
<p>商品价格：{ item.price }</p>
</li>
)
})
}
</ul>)
ReactDOM.render(uls,document.querySelector("#box"))
</script>
5.条件判断
(1)在jsx中，实现条件判断可以使用if
arr.map(item=>{
if(item.status){
return (
<li key={ item.id }>
<p>商品编号：{ item.id }</p>
<p>商品名称：{ item.goodsname }</p>
<p>商品价格：{ item.price }</p>
</li>
)
}
})
(2)如果在jsx渲染的虚拟DOM中需要再次使用条件判断
<p>
{
(
function(){
if(item.isnew == 1){
return <span>新品</span>
}
}()
)
}
</p>
6.注意事项
(1)不能把html和body标签当成挂载点
(2)虚拟DOM只能有一个根标签
(3)单标签要有闭合，input、hr、br、img
(4)行内样式，要写成对象格式
<div id="box2" style={ { color:'red' } }>box2</div>
(5)class属性
class属性要改为className
(6)for属性
for属性要改为htmlFor
四、脚手架
1.安装
npm i create-react-app -g
验证是否安装成功
create-react-app -V
2.初始化项目
进入一个指定的目录（不要在c盘或者桌面），执行命令
create-react-app 项目名称
项目名称不要包含中文和空格
3.启动项目
在命令行中进入到项目根目录，执行命令
npm start
项目启动成功后，会自动打开浏览，并在3000端口上运行
4.项目目录结构
node_modules 项目依赖目录
public 项目运行根目录
src 项目源码目录
index.js 项目启动文件
index.css 全局样式文件
App.js 根组件
App.css 根组件样式文件
项目运行流程：
public/index.html
src/index.js
src/App.js
五、组件
1.函数组件
无状态组件
function App() {
return (
<div className="App">
<h1>根组件</h1>
</div>
);
}
export default App;
2.类组件
状态组件（业务组件）
在react中，组件的首字母要大写
import React from 'react'
// 声明一个类组件
export default class Home extends React.Component{
render(){
return(
<div>
<h1>home组件</h1>
</div>
)
}
}
六、状态机
只有类组件才有状态机
1.定义方式一
在类中直接定义一个state属性，属性值的数据类型是对象
state = {
msg : 'react状态机'
}
render(){...}
2.定义方式二
constructor(){
super();//在构造函数中，必须要先调用super，才能够获取到this指向
this.state = {
msg : 'react状态机'
}
}
render(){...}
在页面组件中使用状态机中的数据
<p>{ this.state.msg }</p>
3.修改状态机中的数据
在状态机中给提供了一个setState方法，用来修改状态机中的数据，同时可以实现页面重新渲染。
setState方法做了两件事情：
第一个是合并数据
第二个是调用render方法来重新渲染页面
import React, { Component } from 'react'
export default class Clock extends Component {
state = {
nowtime : new Date().toLocaleTimeString()
}
changeTime(){
setInterval(() => {
// this.state.nowtime = new Date().toLocaleTimeString()
this.setState({
nowtime : new Date().toLocaleTimeString()
})
}, 1000);
}
// 组件挂载完成生命周期钩子函数
componentDidMount(){
this.changeTime();
}
render() {
return (
<div>
<h2>当前时间：{ this.state.nowtime }</h2>
</div>
)
}
}
浙公网安备 33010602011771号