React基础

JS 的类是基于原型实现的。
创建类：构造函数，字面量，function，
语法糖：将部分的代码简化
前端最影响效率的就是dom操作。
（console.time）
虚拟dom本质是内存中的一个对象，可以根据这个产生真实dom。和真是dom是相互对应的
jsx就是语法糖：必须有一个根元素，标签必须闭合，可以在js代码直接写标签。
数据绑定
props，
getInitialState 初始化state
事件绑定
react中的事件绑定，类似于原生JS，以驼峰式命名。传其他参数，不加（）。函数式箭头函数，e自己加上
{/* 注释内容 */}
数据绑定控制显示隐藏：三元表达式， 或运算符||，执行的函数有返回数据就可以显示。
列表渲染：v-for map方法

通知页面修改this.State方法（要想改的值，改成什么值）
bind会将默认参数向后放。
渲染
render方法
数组渲染在react，每一项会被拆分开。
对象不能在react直接渲染。
属性绑定
不需要指令后面直接加{}
class是关键字用className
组件名的首字母必须大写。

组件嵌套，组件通信

react没有插槽，组件标签内部的内容通过：this.props.children

从外而来和舒适化的冲突，以外部为准
getDefaultProps：生命周期初始化props，从外而来和初始化冲突，以外部为准。
自定义属性props。

ref：绑定一个元素，可以获取元素。
绑定一个组件，获取组件对象，父组件调用子组件的方法。

父子通信
1，（值在子组件用）通过refs实现父组件调用子组件的方法，子组件自己的方法，修改自己的值
2，（在父组件）通过props 将父组件的值传递给子组件，父组件的方法控制父组件值修改
子父通信
父组件的方法传递给子组件，由子组件进行调用
兄弟通信
父子子父结合，状态提升

生命周期：
this对象，数据，dom元素，生命周期的功能

挂载阶段：

getDefaultProps: 初始化props
里的this指：组件对象实例的构造函数
没有组件对象，没有数据没有dom，
getInitialState： 初始化state
有this，没有props，没有state没有dom
componentWillMount：组件将要加载。
this,props,state有 dom有
修改state数据不需要setState
可以做数据请求，（但是不要做）
compontDidMount:组件挂载结束（最常用）
this，props,state,dom都有
修改state数据不需要setState
初始化操作dom（swiper，iscoroll ）

运行中的 state
componentWillReceiveProps:
props改变之后触发
shouldComponentUpdate:
返回值：true，false
能做效率优化，不推荐
componentWillupdate: 组件更新之前
获取更新之前的dom元素
赋值是注意死循环
componentDidUpdate 组件更新之后

卸载
componentWillUnMount

脚手架

npm run eject 解开react大礼包（可能会需要提交一下git）
git commit -m 'react-init

config:项目配置目录，代理（alias，less，sass）
public:共有文件目录
scripts:webpack的根本目录
gitignore：git的忽略文件（远程提交不想提交放在这里 ）
src：源码目录（App,index,serviceWorker.js）
index.js main.js js的入口文件

17年底到18年初正式才有16版本
18年中下旬 才大规模使用

15-16版本：
React.createClass()
class Box extends React.Component{}

通过class创建的组件叫类组件
constructor:初始化state，props
super：执行父类的构造函数
创建组件的方式发生了改变
废除两个生命周期：
getInitialState
getDefaultProps

组件的分类
按照创建方式来分：
类组件（状态组件）：用class，类来创建的组件，props，state，生命周期啥都有
函数组件（无状态组件）：用函数来创建的组件，只有props，只做渲染用
spa单页面，mpa（多页面）,pwa(离线应用)

样式覆盖：
1.react 不想vue scope 样式作用域 当组件的类名重复的时候 样式会相互影响

1. 样式名不重复 （bem buttnon-ormal-small login-input-us）
2. 在js 中写css css in js （components-style插件） 不能用预处理语言
3. 样式模块化

减少ajax,请求，和HTTP 请求

路由 ：react-router-dom

原理：监听地址栏的改变，根据地址栏的改变渲染不同的组件
app：c/s
webapp:b/s

react-router 1-3
react-router-dom : 版本5
react-native: 做app
react-router-native:
react-dom:做网页的

安装了路由插件：npm install react-router-dom
HashRouter，哈希路由#
BrowserRouter，历史路由
Link，相当于a标签，to+路径
Route，相当于router-view (path：配置地址栏的改变，component：渲染的组件)
{Swich：万一挑一，只返回匹配的第一个组件《》（包裹Route）
exact：精准匹配，path和路径完全一样}

NavLink：：activeClassName=" " +exact精准匹配
RenderComponent 接受组件的组件参数
地址栏里不匹配，路由里没有的路径：NotFind
switch里写Route 必须写在最底下

<Route component={NotFind}></Route> 

除了component方式创建组件，还可以用render写函数式

子路由也叫嵌套路由，嵌套路由的外层不加精准匹配
声明式导航：标签跳转
动态导航（path+id）
传参：获取参数通过history——match下的params：

**编程式导航：**必须有路由对象
1，动态导航
2，query：传参（拼接）路由对象下的location.search（很少用）
3，state：直接是数组不需要解析，直接使用，在路由对象下的location.state获取数据（用的多）
重定向
Redirect：两个参数from:从哪来，to:到哪去
和精准匹配使用exact

路由懒加载
需要插件：react-loadable

路由守卫：
高阶组件
withRouter是一个高阶组件 可以将组件进行处理 被处理的组件会有路由对象。
正常的组件是没有路由对象的（需要用Route进行处理，）

必须包裹在HashRouter，BrowserRouter两个其一
1，控制地址栏的改变
2，根据地址栏的改变渲染不同的组件

Fragment：作为组件的根元素使用，不会渲染任何元素

高阶组件：hoc

共有的事情要统一处理

本质：函数
特点：接受一个组件作为参数，返回一个新组件
高阶函数
本质：函数
特点：接受一个函数作为参数，返回一个新函数