React
概念: 构建用户界面的javaScript库
只关注处理UI,不关心路由不处理ajax
库:
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
注: 如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
-
- (最适合 )
- (最适合Node.js应用程序)
- (最适合静态网站)
-
-
历史: 2013.05,由facebook
衍生出Reactv Native项目(跨平台的框架) 服务器端，浏览器端，移动端
功能 :以构建组件视图为核心
特点:
声明式设计 -data 响应数据 -methods 处理函数 这样写的好处按照开发人员约定好的方式进行开发，所有人写出来的代码就像一个人写的.
-state 生命周期钩子函数
高效:最大程度减少DOM的操作
虚拟DOM+DIFF算法
灵活:本身只处理UI,与已知的库能够很好的配合
jsx:(编译语言，允许开发者在将javaScript和html进行混搭)javaScript语法的扩展
组件:代码更好得到复用，组件之间是相互独立大队
通过与用户的交互，实现不同状态，然后重新渲染UI,让用户界面和数据保持一致
单向响应的数据流:实现了单页响应的数据流，从而减少了重复代码
优势：组件管理能力是所有框架中最好的
组件: 设置状态 setState:(Object nextState[,function callback])
替换状态 replaceState
设置属性 setProps
替换属性 replaceProps
强制更新 forceUpdate
获取DOM节点 findDOMNode
判断挂载状态 isMounted
依赖: webpack层面，安装webpack和webpack-cli,写webpack.config.js文件
babel-loader层面 我们要--save-dev 安装两个:babel-core和babel-loader
react层面: react,react-dom (react的源码，先引入后使用)
loader:webpack在构建文件，打包文件的时候，捎带脚做的事
cnpm install webpack webpack-cli --save
cnpm install --save-dev babel-core babel-loader@7 babel-preset-env babel-preset-react
cnpm install --save react react-dom
cnpm install clsssName --save
为什么要使用jsx语法
- jsx执行更快，因为在编译过程中对jsx代码做了优化
- 类型安全，在编译过程中就可以发现错误
- jsx编译模板更加简单迅速
生命周期函数
上树阶段
constructor() 构造函数 写state
componentWillMount() 将要上树，发出ajax请求
render() 呈递视图
componentDidMount() 上树之后，操作DOM
更新阶段
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,nextState) 门神
componentWillUpdate(nextProps,nextState) 更新之前做的事
render()
componentDidUpdate(prevProps,prevState) 更新之后做的事
下树阶段
componentWillUnmount() 将要下树
* 为了防止死循环，在更新阶段都不需要操作State
Angluar,Vue,React
相同点: 都是MVVM框架，都能够实现数据变化视图自动变化
不同点:
原理不同
Angluar: 脏检查，词法分析，进行隐形的视图的更新
React:setState() 等调用视图函数，配合DIFF算法和Virtual,DOM的变化效率更高(不存在双向数据绑定)
Vue:数据劫持
单页面应用:单页面应用就是类似于桌面的应用，挪用到网页中，用前端技术去实现它
组件化,hash路由，封装
子组件调用超类的构造函数，通过extends继承
react运行流程
npm install -g cnpm --registry=https://
npm config set registry https://
cnpm install --save-dev webpack webpack-cli
cnpm install --save-dev babel-core babel-loader@7 babel-preset-env babel-preset-react
cnpm install react react-dom
建立文件夹,[project-name]
cd进入该文件夹
创建weppack.config.js
const path = require('path');
module.exports = {
entry: "./app/main",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "node_modules")
],
loader: "babel-loader",
options: {
presets: ["env" , "react"]
}
}
]
},
watch : true
}
创建文件夹app,建立main.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<h1>我是React！哈哈</h1>
</div>
,
document.querySelector("#app-container")
);
npx webpack --mode development
jsx语法
1.JSX语法如果出现class要用className代替,for用htmlfor代替;
2.JSX语法必须严格封闭;单标签必须有末尾的反斜杠
3.JSX遇见数组，会被自动展开 （包括for循环）
React中只有两个地方用到了JSX语法
render()函数中的return和ReactDOM.render()第一个参数
数组中的操作：
增加: [...this.state.students,{}]
删除: filter
更改 map
受控组件和非受控组件
受控组件: e.target.value onChange和state属性和state进行模拟"双向数据绑定"
非受控组件: this.refs.** ref="nameTxt"
一个组件只有表单元素，才有资格区分是受控的，还是非受控的;
每个下辖的子组件，只需要对父组件的"全局"数据负责，而不需要考虑其他兄弟组件做出任何改变
组件可以相互嵌套
组件有两种:函数式组件，类组件（重点）
定义一个函数，函数的名字是大写的，暗示这是一个组件
数据传递:
儿子只能用this.props.**接受
儿子中this.props是只读的，不能修改父亲传入的值
如果儿子要改，父亲传入一个函数给儿子
要限制一个组件父亲给它传入的参数的类型和个数，此时要用PropTypes
import PropTypes from "prop-types";
Compo1.propTypes={
a:PropTypes.number.isRequired; //number表示数字,isRequired表示不可省略
b:PropTypes.func.isRequired;//func表示函数,isRequired表示不可省略
}
生命周期:
上树阶段
constuctor() 构造函数
componentWillMount() 将要上树
render() 呈递视图
componentDidMount() 上树之后，操作DOM
更新阶段
props的改变或者State的改变将触发此阶段
componentWillReceiveProps(nextProps) 表示父亲传入的新的参数
shouldComponentUpdate(nextProps,nextState) 门神 (默认 return true return false)
componentWillUpdate(nextProps,nextState) 更新之前做的事，此时视图没有变化
render()
componentDidUpdate(prevProps,prevState) 更新之后做的事
下树阶段
componentWillUnmount() 将要下树
为了防止生命周期陷入死循环，在5个生命周期阶段都不能操作State
不管业务逻辑有多大,state,reducer,store只有一组
Redux-thunk实现异步
需要服务器环境
express自己写
JSON-Server
webpack-dev-Server
npm install --save-dev redux-logger
利用某个dispatch改变store,言外之意就是action带着服务器上下来的值当做载荷，此时必须使用dispatch的"延时插件"
Redux的好处
将所有数据放到全局，是可预测状态的容器，它里面的数据都是"私有"的，外部要想改变它，必须通过dispatch一个action来改变
JSON-Server可以非常快速的做出:
（1）模拟数据库
cnpm install -g json-server
将App组件拆分为三个组件TodoHd,TodoBd,TodoFt
redux-thunk和redux-saga是最火的解决Redux编程中异步问题的解决方案
babel-loader 是7.x 对应的babel 6.x
babel-loader 是8.x 对应的babel 7.x
类组件书写的规则
每一个类组件都是单独的组件，文件的名字和类完全相同!类的名字大写字母开头!
类必须继承React.Component类，所以要引入react包
PropType: 限制一个组件父亲给它传入的参数和类型的个数
store 存储了state数据，并且维持了一套操作state的api
store的功能
可以读取数据 store.getStore()
允许更新state store.dispatch(action)
注册视图 subscribe(listener)
document.getElementByid("box").οnclick={
store.dispatch({"type":"zengjia"})
}
安装Redux :
npm install redux --save
npm install react-redux
npm install --save-dev redux-devtools