# react-learn

**Repository Path**: liqijin/react-learn

## Basic Information

- **Project Name**: react-learn
- **Description**: react学习api、第三方依赖、ui组件库、功能性组件
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-14
- **Last Updated**: 2023-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Ant-Design, react-redux, react-router-dom

## README

<!--
 * @Author: 
 * @Date: 2022-01-25 16:41:19
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-25 15:27:03
 * @Description: 请填写简介
-->
## 一、todoList案列相关知识点
    1. 拆分组件、实现静态组件，注意：className、style的写法
          ——某些组件使用： 放在自身的state中
          ——某些组件使用： 放在它们共同的父组件state中（官方称此操作为： 状态提升）
    2. 关于父子之间的通信：
          1. 【父组件】给【子组件】传递数据： 通过props传递
          2. 【子组件】给【父组件】传递数据： 通过props传递，要求父提前给子传递一个函数
    3. 注意defaultChecked和checked的区别，类似的还有： defaultValue和value
          ——defaultChecked只在第一次起作用，checked获取最后一个的结果
          ——使用checked的时候需要onChange进行约束，不然会报错
    4. 状态在哪里，操作状态的方法就在哪里
## 二、github搜索案例相关知识点
    1. 设计状态时要考虑全面，列如带有网络请求的组件，要考虑请求失败怎么办
    2. es6小知识点： 结构赋值+重命名
        连续结构赋值+重命名
        const { obj1: { obj2: { obj3: data } } } = obj
    3.消息订阅与发布机制
        1.先订阅，在发布
        2.适用于任意组件间通信
        3.要在组件的componentWillUnmount中取消订阅
    4.fetch发送请求(关注分离的设计思想)
        try {
          const res = await fetch(`/api1/search/users?q=${value}`)
          const result = await res.json()
          PubSub.publish('initState', { isLoad: false, searchList: result.items })
          console.log(result)
        } catch (error) {
          PubSub.publish('initState', { isLoad: false, isError: error.message })
          console.log(error)
        }
### NavLink
    1. 通过this.props.children可以获取到标签体的内容
    2. 标签体是一种特殊的标签属性
    3. NavLink可以实现路由链接的高亮，通过activeClassName指定命名
### Switch
    1. Switch可以提高路由的匹配效率：单一匹配原则
    2. 通常情况下，path和component是一一对应的关系
### 解决多级路径刷新页面样式丢失的问题
    1. 去除相对路径写法（./）
    2. 添加%PUBLIC_URL%写法
    3. 更改为HashRouter路由
### 路由的匹配
    1. 默认使用的是模糊匹配，需要路由顺序一致
    2. 开启严格匹配：exact
    3. 多级路由情况下尽量不适用严格
### 路由传递参数
    1. params传递
        1. 路由链接需携带参数 to={`/router/${id}`}
        2. 注册路由时需声明接收参数 /router/:id/:title
        3. 在props中接收参数：props:{match:{params:{}}} -> props.match.params
    2. search参数（query参数）
        1. 路由链接需携带参数 to={`/route?id=${id}&title=${title}`}
        2. 注册路由时无需多余操作
        3. 接收参数：props.location.search -> 可以通过query-string插件解析urlencode:  qs.parse()
    3. state参数
        1. 路由链接需携带参数 to={{ pathname: '', state: {}, query: {} }}
        2. 注册路由时无需多余操作
        3. 接收参数：props.location: {state、query}. 传递参数支持页面刷新，并不会丢失数据
### BrowserRouter和HashRouter的区别
    1. 底层：
        browser是使用h5的history API，二次封装，不支持IE9及以下版本
        hash使用的是URL的哈希值
    2. url表现形式：
        browser的路径中以‘/’分割
        hash的路径中包含了‘#’，‘#’之后的内容不会发送到服务器
    3. 刷新路由对state参数的影响：
        browser没有任何的影响，因为state保存在history的对象中
        hash刷新后会导致路由state参数丢失
    4. hash可以用于解决一些路径错误相关的问题
### redux
    定义：
      1.redux是一个专门用于做状态管理的JS库(不是react插件库)。
      2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。
      3.作用: 集中式管理react应用中多个组件共享的状态。
    使用：
      1.某个组件的状态，需要让其他组件可以随时拿到（共享）。
      2.一个组件需要改变另一个组件的状态（通信）。
      3.总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
    三个核心：
      1.action
        1-1. 动作对象
        1-2. 包含两个属性：
          type：标识属性，值为字符串，唯一，必要属性
          data：数据属性，值类型任意，可选属性
      2.reducer
        2-1. 用于初始化状态
        2-2. 加工时，根据旧的state的action，生成新的state的函数
      3.store
        3-1.将state、action、reducer联系在一起的对象
    API：
      createStore()：创建一个store
      getState()：得到state
      dispatch(action)：分发action，触发reducer调用，产生新的state
      subscribe(listener)： 注册监听，当产生了新的state时，自动调用
      combineReducers({}): 用于合并reducer，汇总操作
      applyMiddleware(thunk:redux-thunk): 异步中间件
    备注：
      redux只负责状态的更改，不负责页面的渲染
    异步action：
      1.action返回值为一个function函数，函数开启一个异步队列
      2.异步任务有结果之后，分发一个同步的action去真正的操作数据
    redux-thunk：
      用于支持异步action
      需要store中间件支持开启，applyMiddleware(thunk)
### redux-redux:
      说明：
        1.所有的ui组件都应该包裹一个容器组件，它们应该是父子关系
        2.容器组件可以随意使用redux的api
        3.ui组件不能使用任何redux的api
        4.容器给ui传递：状态、操作状态的方法，均通过props获取
        5.容器会检测redux的状态改变，并且会从新调用render渲染视图
      api：
        connect：容器组件，用于结合store和ui组件，并且传递状态和操作状态方法，connect(mapStateToProps, mapDispatchToProps)(component)
          a.mapStateToProps(): redux中保留的状态
          b.mapDispatchToProps(): 用于操作状态的方法
        provider：包裹在最外侧组件中，用于向下传递store，store={store}
### 纯函数
    1.只要是同样的输入，必定得到同样的输出
    2.约束：
        2-1：不得改写参数数据
        2-2：不会产生任何副作用，网络请求、输入和输出设备
        2-3：不能调用Date.now()或者Math.random()等方法，导致函数不纯
    3.redux的reducer函数必须是一个纯函数
### 高阶函数
    1.理解：参数是函数，返回是函数
    2.示例：
      2-1：定时器设置函数
      2-2：数组的forEach/map/filter/reduce/find/bind方法
      2-3：promise
### git commit

#### message格式

1. feat：新增功能
2. fix：功能修正或改进
3. debug： 修复产品或测试提出的bug
4. refactor：重构
5. test：增加测试代码
6. style：调整样式
7. docs：修改或增加文档

### setState()更新状态
  更新状态触发渲染函数时无法立即获取已更新的状态