React路由

SPA的理解

1.单页Web应用(single page web application , SPA)
2.整个应用只有要给完整的页面
3.点击页面中的链接不会刷新页面，只会做页面的局部更新
4.数据都需要通过ajax请求获取，并在前端异步展现

路由的理解

1. 什么是路由？
   1.一个路由就是一个映射关系(key:value)
   2.key为路径，value可能为fn或component

2. 路由分类
   1.后端路由：
   1).理解：value是fn，用来处理客户端提交的请求
   2).注册路由：router.get(path,function(req,res))
   3).工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据。
   2.前端路由：
   1).浏览器端路由，value是component，用于展示页面内容
   2).注册路由：<Route path='/test' component={Test} >
   3).工作过程：当浏览器的path变为/test时，当前路由组件就会变成Test组件

    前端路由的基石：工作原理,history(浏览器的历史记录)
    栈(后进先出)
    DOM(document对象)
    BOM(window对象)
    let history = History.createBrowserHistory();   //历史模式(直接使用H5退出的History身上的API)
    let history = History.createHashHistory();      //哈希模式(#锚点)(hash值)
    function push(path){
        history.push(path)
        return false
    }
    function replace(path){     //替换
        history.replace(path)
    }
    function back(){
        history.goBack()
    }
    function forword(){
        history.goForward()
    }
    history.listen(location=>{
        console.log("请求路径发生了变化",location);
    })
   

react-router的理解

1.react的一个插件库
2.专门用来实现一个SAP应用
3.基于react的项目基本都会用到此库
三种：(web,native,any)
web：react-router-dom 
下载路由：npm i react-router-dom 

路由的基本使用

1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
    <Link to='/xxx' > Demo </Link>
3.展示区写Route标签进行路径的匹配
    <Route path='/xxx' component={Demo} />
4.<App> 的最外侧包裹了一个 <BrowserRouter> 或 <HashRouter>

路由组件与一般组件

1.写法不同：
    一般组件: <Demo/>
    路由组件: <Route path='/demo' component={Demo} />
2.存放位置不同：
    一般组件： components
    路由组件： pages
3.接收到的props不同：
    一般组件：写组件标签时传递了什么，就能收到什么
    路由组件：接收到三个固定的属性、history、location、match
    history：
        go、goBack、goForward、push、replace
    location：
        pathname、search、state
    match：
        params、path、url

NavLink 与 封装NavLink

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容

Switch的使用

1.通常情况下，path和component是一一对应的关系
2.Switch可以提高路由匹配效率(单一匹配)

解决多级路径刷新页面样式丢失的问题

1.public/index.html 中 引入样式不写 ./ 写 /
2.public/index.html 中 引入样式不屑 ./ 写 %PUBLIC_URL% (React常用)
3.使用HashRouter

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配
2.开启严格匹配 <Route exact={true} path="/home" component={Home} />
3.严格匹配不要随便开启

Redirect 的使用

1.一般卸载所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.<Redirect to="/home" />

push 和 replace

1. 路由默认开启的是push模式，会留下痕迹，压栈
2. 开启replace模式，替换

编程式路由导航

借助this.props.history对象上的API对操作路由跳转、前进、后退
    this.props.history.push()
    this.props.history.replace()
    this.props.history.goBack()
    this.props.history.goForward()
    this.props.history.go()

widthRouter

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件

BrowserRouter与HashRouter的区别

1.底层原理不一样：
    BrowserRouter使用的是H5的history api，不兼容ie9及以下版本
    HashRouter使用的是URL的哈希值
2.path表现形式不一样
    BrowserRouter的路径中没有#
    HashRouter的路径包含#
3.刷新后对路由state参数的影响
    (1).BrowserRouter没有任何影响，因为state保存在history对象中
    (2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题

antd

redux

redux是一个专门用于做状态管理的JS库
redux集中管理react应用中多个组件共享状态

某个组件的状态 需要让其他组件可以随时拿到
一个组件需要改变另外一个组件的状态
总体原则：能不用就不用，大型项目用

redux工作流程

Action Creators     //action的创建者
————  action {type,data}    //动作对象
————  dispatch(action)      //
Store       //
React Components        //
Reducers        //

redux三个核心概念

redux核心api

redux编写应用

1.求和案例_redux精简版

(1).去除Count组件自身的状态state
(2).src下建立：
    -redux
        -store.js
        -count_reducer.js
(3).store.js：
    1.引入redux中的createStore函数，创建一个store
    2.createStore调用时要传入一个为其服务的reducer
    3.记得暴露store对象
(4).count_reducer.js：
    1.reducer的本质是一个函数，接收：preState，action，返回加工后的状态
    2.reducer有两个作用：初始化状态，加工状态
    3.reducer被第一次调用时，是store自动触发的，
        传递的preState是undefined
        传递的action是：{type:'@@REDUX/INIT'}
(5).在index.js中检测store中状态的改变，一旦发生改变重新渲染<App/>
    备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写

2.求和案例_redux完整版

新增文件：
    1.count_action.js   专门用于创建action对象
    2.constant.js   防止容易写错的type值

3.求和案例__redux异步action版

1.明确:延迟的动作不想交给组件自身，想交给action
2.何时需要异步action:想要对状态进行操作，但是具体的数据靠异步任务返回(非必须)
3.具体编码:
    1).npm i redux-thunk,并配置再store中
    2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
    3).异步任务有结果后，分发一个同步的action去真正操作数据
4.备注:异步action不是必须要写的，完全可以自己等待异步任务有结果了再去分发同步action

react-redux的理解

react、redux(非react团队作品)、react-redux(react作品)
react-redux:
    1.所有的UI组件都应该包裹一个容器组件，他们是父仔关系。
    2.容器组件是真正和redux打交道的，里面可以随意的使用redux的api
    3.UI组件中不能使用任何redux的api
    4.容器组件回传给UI组件:(1).redux中所保存的状态。(2).用于操作状态的方法
    5.备注:容器给UI传递:状态、操作状态的方法，均通过props传递

4.求和案例_react-redux基本使用

1.明确两个概念:
    1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等
    2).容器组件:负责和redux通信,将结果交给UI组件
2.如何创建一个容器组件 — 靠react-redux的 connect 函数
    connect(mapStateToProps,mapDispatchToProps)(UI组件)
        - mapStateToProps:映射状态,返回值是一个对象
        - mapDispatchToProps:映射操作状态的方法,返回值是一个对象
3.备注1:容器组件中store是靠props传进去的,而不是在组件容器中直接引入
4.备注2:mapDispatchToProps,也可以是一个对象