# react学习素材

**Repository Path**: deng_da_chao/react-learning-materials

## Basic Information

- **Project Name**: react学习素材
- **Description**: 供应react学习使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-03-15
- **Last Updated**: 2022-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, 学习资料

## README

# react版本环境： 
"react-router-dom": "^5.2.2",
## 路由的基本使用
  * 明确好界面中的导航区、展示区
  * 导航去的a标签为Link标签
    ``` <Link to="/xxx">Dome</Link> ```
  * 展示区写Route标签进行路径的匹配
    ``` <Route path="/xxx" component={Xxx} /> ```
  * <App>的最外侧包裹了一个<BrowserRouter>或者<HashRouter>

## 路由组件与一般组件
  * 写法不同：
    * 一般组件:   <Demo/>
    * 路由组件： <Route path="/xxx" component={Xxx} />
  * 存放位置不同：
    * 一般组件：components
    * 路由组件：pages
  * 接收到的props不同：
    * 一般组件：写组件标签时传递了什么，就能收到什么。
    * 路由组件：接收到三个固定的属性
```
      history: - 路由方法
          go: ƒ go(n)
          goBack: ƒ goBack()
          goForward: ƒ goForward()
          push: ƒ push(path, state)
          replace: ƒ replace(path, state)
      location: - 路由传参获取
          pathname: "/home"
          search: ""
          state: undefined
      match: - 路由信息
          params: {}
          path: "/home"
          url: "/home"
```

## NavLink与封装NavLink
  * NavLink可以实现路由链接的高亮，通过activeClassName指定样式名；
  * 标签体内容是一个特殊的标签属性；
  * 通过this.props.childrea可以获取标签体内容

## Switch快速一对一匹配路由
  * 通常情况下,path和component是一一对应的关系.
  * Switch可以提高路由匹配效率(单一匹配).

## 解决多级路径刷新页面样式丢失问题
  * public/index.html 中引入样式时不写 ./ 写 / (常用)
  * public/index.html 中引用样式时不写 ./ 写 %PUBLIC_URL% (常用)
  * 路由使用HashRouter模式

## 路由的严格匹配与模糊匹配
  * 默认使用的是模糊匹配(简单:【输入的路径】必须包含要【匹配的路径】，且顺序要一致)
  * 开启严格匹配：<Route exact={true} path="/index" component={Index}/>
  * 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

## Redirect重定向路由
  * 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由;
  * 编码如下：
    ```
    <Switch>
        <Route path="/about" component={About} />
        <Route path="/home" component={Home} />
        <Redirect to="/home"></Redirect>
    </Switch>
    ```

## 嵌套路由
  * 注册子路由时要写上父路由的path值
  * 路由的匹配是按照注册路由的顺序进行的

## 向路由组件传递参数
  * params参数
      * 路由链接(携带参数):<Link to={`demo/test/tom/18`}>详情<Link>
      * 注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
      * 接收参数:const {id,title} = this.props.match.params
  
  * search参数  
      * 路由链接(携带参数):<Link to={`/dome/test?name=tom&age=18}`>详情</Link>
      * 注册路由(无需声明,正常注册即可):<Route path="/dome/test" component={Test} />
      * 接收参数: const {search} = this.props.location
      * 备注:获取到的search是urlencoded编码字符串,需要借助querystring解析;

  * state参数
      * 路由链接(携带参数):<Link to={{path:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
      * 注册路由(无需声明,正常注册即可):<Route path="/dome/test" component={Test} />
      * 接收参数: this.props.location.state
      * 备注:刷新也可以保留住参数;

## 编程式路由导航
  * 借助this.props.history对象上的API对操作路由跳转、前进、后退
    * this.props.history.push()
    * this.props.history.replace()
    * this.props.history.goBack()
    * this.props.history.goForward()
    * this.props.history.go(-2)

## BrowserRouter与HashRouter的区别
  * 底层原理不一样:
    * BrowserRouter使用的是H5的history API,不兼容IE9及以下版本.
    * HashRouter使用的是URL的哈希值.
  * path表现形式不一样:
    * BrowserRouter的路径中没有#.
    * HashRouter的路径中包含#.
  * 刷新后对路由state参数的影响:
    * BrowserRouter没有任何影响,因为state保存在history对象中.
    * hashRouter刷新后会导致路由state参数的丢失.
  * 备注:HashRouter可以用于解决一些路径错误相关的问题.



# redux状态管理 -------------------------------------

  ## redux精简版
    * 文件创建布局
      - src
        - redux
          - store.js
          - reducer.js

    * store.js:
      * 引入redux中的createStore函数,创建一个store
      * createStore调用时要传入一个为其服务的reducer
      * 记得暴露store对象

    * reducer.js:
      * reducer的本质是一个函数,接收:perState\action 返回加工后的状态
      * reducer有两个作用: 初始化状态\加工状态
      * reducer被第一次调用时,是store自动触发的,传递的preState是undefined

    * 在index.js中检测store中状态的改变,一旦发生改变重新渲染<App/>
      * 备注: redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写

  ## redux完整版
    * action.js 专门用于创建action对象
    * constant.js 放置容易写错的type值常量

  ## redux异步action版
    * 明确:延迟的动作不想交给组件自身,想要交给action
    * 何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回.
    * 使用流程:
      * npm add redux-tthunk,并配置到store中
      * 创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务.
      * 异步任务有结果后,分发一个同步的action去真正操作数据.
    * 备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action.