react基础，脚手架，组件创建，组件通信
React基本知识
react并不是框架，它只是一个类库。类似于jquery。它没有设计模式，它是单项数据流。它大部分都是原生js的写法。
如果一定非要把它跟MVC中V 是一样的。它更多的是操作视图（view）
react是脸书（Facebook），它最早是内部项目，13年年中开源
react在国内之前没有太多的市场
随着产品需求的增加（Vue是不能实现大型的电商项目pc端。vue大部分做的还是移动端）
react中有一个新的语法糖，jsx (javascriptXML)它可以使js和html混合使用
React在大厂应用狠多（BAT、美团、字节跳动、滴滴等等，京东）
上海、杭州、深圳
1.react 介绍
React 是Facebook内部的一个JavaScript类库。（13年5月开源）
React 可用于创建Web用户交互界面（还是视图）。
React不是一个完整的MVC框架,最多可以认为是MVC中的V（View）,甚至React并不非常认可MVC开发模式。 MVC（M model模型 V view视图 C controller 控制器）
React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。
React 引入了虚拟DOM（Virtual DOM）的机制。（用js对象去模拟一段真实DOM，它还有diff算法，它都是拿旧的对象树和新的对象进行对比，有差异的就进行渲染）
React 引入了组件化的思想。（两种创建组件的方式）
React 使用Facebook专门为其开发的一套语法糖–JSX（语法糖）。 把js和html代码混合使用
2.特点
虚拟DOM
概念： React不会直接操作真实的DOM，而是利用javascript的轻量级的对象去操作逻辑。这个对象我们就称之为虚拟dom
组件化（两种创建组建的方式）
react在创建的过程中，就是利用组件的方式去进行创建
JSX语法
让html和js 混合使用
3.优缺点
- 优点
● React速度很快 react并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。 ● 跨浏览器兼容 虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。 ● 一切皆是组件 代码更加模块化，重用代码更容易，可维护性高。 ● 单向数据流 Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。 ● 同构、纯粹的javascript 因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。 ● 兼容性好 比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
- 缺点
React不适合做一个完成的框架。 React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
4.官网地址
https://react.docschina.org/
5.概念
用于构建用户界面的 JavaScript 库
6.安装
- 非脚手架的安装
cdn方式
开发环境
生产环境
把核心库下载到本地并引入
- 脚手架的安装
全局搭建react环境（只需要执行一次）
npm install(i) -g create-react-app
版本号： [email protected]
安装项目
create-react-app 项目名称
启动方法：
npm start
如果想修改默认端口号：
node-modules=>react-scripts=>scripts =>start.js
大概64的位置
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
把3000修改成你想要的端口，记得！！！重启！！！！
7、目录结构
my-app
├── README.md 阅读指南
├── node_modules 依赖管理
├── package.json 配置管理
├── .gitignore git上传时要忽略的文件
├── public 公有的是存储html的位置
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js 主组件
├── App.test.js
├── index.css
├── index.js 主的js文件
├── logo.svg
└── serviceWorker.js 服务文件
└── setupTests.js 测试端文件
8.初始化脚手架下SRC
删除掉默认的src
重构src
index.js
app.jsx
//jsx特点，把js和html 混合使用
//jsx语法糖规定只能有一个根元素 root
//jsx语法糖一定要有一个闭合标签
//jsx语法糖，它遇见<>它会自动解析成html标签遇见{} 会解析成js语法
9.组件的创建方式
- 函数创建
//引入封装好的home组件
import Home from './components/home'
//利用函数创建组件
function App(){
return (
主组件
- 类的创建
//利用类去创建组件
//用类去创建，它继承了父类的所有属性和方法
import React from 'react'
class Home extends React.Component {
constructor(){
//构造函数，它属于生命周期中的初始化阶段
super()
}
render(){
console.log(this,'继承父类的属性方法');
//渲染，它是生命周期的函数
return(
我是首页
)
}
}
export default Home
- 两种创建方式的区别
组件创建函数
没有this
它没有state
它还没有生命周期
类创建函数
this指向当前子类（继承父类的所有属性和方法）
有state
有生命周期
10.state
state 页面UI状态的最小集合. state 的数据的改变，页面才会重新渲染
setState()是修改state的唯一方式
【注意1】：setState()的调用会引起render的重新执行，所以务必不可以在render中调用setState(),否则，会陷入死循环。
【注意2】：this.setState()是异步的,如果我们想要取到修改以后的新值，那么需要在回调函数中处理。
setState()方法第一个参数是要修改的数据对象，它还可以设置一个可选参数，这个参数是回调函数，因为该方法可以被异步调用，如果需要依赖新的状态，可以使用回调来确保这个新的状态是可用的。如果需要依赖新的状态，但是没有等待setState()方法执行结束，这等于同步地使用异步操作，那么当依赖新的状态值时，可能会产生Bug，因为状态值仍然是旧的。
11.事件学习的流程
如何创建事件=>如何传递参数=>如何获取事件源 =>事件传播 =>不同的框架或者库中有没有不同的方式
12、组件通信方式
12.1父子组件通信
-
函数
-
父组件
<子组件 自定义属性='字符串' 自定义属性={字符串/number/对象数组/方法}> -
子组件
通过形参去接收 function(形参){ //语义化 props //props就是父组件传递的数据对象 } -
-
类组件
-
父组件
<子组件 自定义属性='字符串' 自定义属性={字符串/number/对象数组/方法}> -
子组件
通过this.props接收 this.props.自定义属性 -
12.2子父组件通信
-
函数
-
父组件
逻辑 方法(形参){ //形参是子组件传递的数据 } <子组件 自定义属性名={this.方法}> -
子组件
通过形参去接收 function(形参){ //语义化 props }
-
-
类组件
-
父组件
逻辑 方法(形参){ //形参是子组件传递的数据 } <子组件 自定义属性名={this.方法.bind(this)}> -
子组件
//语义化 props
-
12.3非父子通信
它没有特殊的方法
我们可以通过离线存储去实现
通过状态管理去实现（FLux,Redux）