React 阶段性学习总结

2021.5.19学习总结

1. 常用的3个生命周期： render(组件挂载) componentDidMount(组件挂载之后)） componentWillUnMount（组件销毁之前）
2. diff算法模式的基本认识，通过虚拟DOM和真实DOM的比较，渲染到页面，是通过标签进行比较
3. key的认识，在进行插序列表或者开头插入的方式，不可以使用索引当作key，会造成内存消耗，渲染速度慢；在进行输入性操作，比如：input checkbox radio 操作时也不能使用key，因为会造成顺序错乱UI错乱，但如果只是用作列表渲染，是可以使用索引当作key值；
4. 安装React脚手架 如果没有进行过全局安装的先需要全局安装 npm i create-react-app -g
5. 之后通过 create-react-app xxx 进行创建React脚手架 通过yarn start 打开项目

2021.5.20学习总结

1. todoList的案例实践，主要操作了父子组件，同级组件的相互传值

父组件给子组件通过props传递
子组件给父组件通过props传递，但要求父得给子传递一个函数
defaultChecked和checked的区别，defaultChecked只更新第一次
状态在哪里，操作状态的方法就在哪里

2. axios的引用

yarn add axios 或 npm i axios 引入
同源策略（域名，协议，端口）所产生的跨域处理，有两种解决方式
1）在package.json中加入proxy:域名，例：
proxy": "https://xiaochengxu.xicheng.com/position/indexShow
优点：请求简单，前端请求资源不需要任何前缀
缺点：不能配置多个代理
工作方式：当请求的资源不存在时，在自动请求proxy身上的链接

2)在src下创建setupProxy.js文件（文件名不可更改）,并添加固定形式代码，例：

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
       proxy('/api', {
           target: 'https://xiaochengxu.xicheng.com',
           changeOrigin: true,
           pathRewrite: { '^/api': '' }
      })
  )
}

优点：可以多个代理
缺点：配置繁琐，前端请求时必须加前缀

3）全局引入axios，在index.js中，将axios挂载到React的原型对象上，例
React.Component.prototype.axios = axios; 这样就可以在其他页面用this.axios就行调用。

3. nanoid的引入

nonoid是生成唯一key的工具
使用yarn add nanoid进行引入
引入后使用 import { nanoid } from 'nanoid' 进行单独引入
之后在代码中使用 nanoid() 直接调用即可

2021.5.22学习总结

1. github搜索案例

1.设计状态时要考虑全面，例如带有网络请求的的组件，要考虑失败怎么办
2.ES6知识点重复解构赋值加重命名

let obj = {a:{b:1}};
let {a} = obj; //传统解构赋值
let {a:{b}} = obj //连续解构赋值
let {a:{b:value}} //连续解构赋值加重命名

3.消息的订阅与发布机制，使用yarn add pubsub-js 引入
Pubsub.publish('hello', '1111') 用于发布消息
this.token = Pubsub.subscribe('hello', (_, data) => {}) 用于接收消息
Pubsub.unsubscribe(this.token) 用于卸载消息（在componentWillUnmount中卸载）
4.fetch发送请求

2021.5.23学习总结

1. 路由的基本使用

1）导航区的a标签改为Link标签
2）展示区使用<Route/>标签进行路径的匹配<Route path="/xxx" component={xxx} />
3）App最外侧要包裹一层<BrowserRouter/>或者<HashRouter/>

2. 路由组件与一般组件

1）写法不同：
一般组件：<Demo/>
路由组件：<Route path="/xxx" component={xxx} />
2）存放位置不同：
一般组件：Components
路由组件：Pages
3）接受到的props不同
一般组件：传什么接收到什么
路由组件：固定接收到3个参数 history location match

3. NavLink与封装NavLink

1） NavLink可以通过activeClassName指定样式名，默认高亮样式名是active
2）标签体内容是一个特殊的标签属性
3）通过this.props.children获得标签体内容

2021.5.25总结

1. Switch的使用

引入Switch，将Route用Switch包起来
用在多个Route的时候，可以提高效率

2. 解决刷新页面样式丢失的问题

1）index.html中引用的方式不写"./"，用"/"；
2）index.html中引用路径的前面加上%PUBLIC_URL%
3）使用HashRouter

3. 路由的模糊匹配和严格匹配

1）默认使用的是模糊匹配 输入的路径必须要包含匹配的路径，且顺序要一致
2）开启严格模式exact属性 <Route exact path="/home" component={Home} />
3）严格模式不要随便开启，需要在开，有时会导致无法继续匹配二级路由

4. Redirect的使用

一般写在所有路由注册的最下方，当没有路由进行匹配时，就会指向Redirect的路由

<Switch>
      <Route exact path="/home" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/about" component={Test} />
      <Redirect to="/home" />
</Switch>

5. 嵌套路由

1）嵌套子路由时要写上父路由的path值
2）路由的匹配是按照注册路由的顺序来的

6. 向路由组件传递参数

1）params参数传递
路由链接（携带参数）： <Link to={`/about/message/detail/${item.id}/${item.title}`}>{item.title}</Link>
注册路由（声明接收）：<Route path="/about/message/detail/:id/:title" component={Detail} />
2）search参数传递
路由链接（携带参数）： <Link to={`/about/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>
注册路由（无需声明）：<Route path="/about/message/detail" component={Detail} />
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3）state参数传递
路由链接（携带参数）： <Link to={{ pathname: "/about/message/detail", state: { id: item.id, title: item.title } }}>{item.title}</Link>
注册路由（无需声明）：<Route path="/about/message/detail" component={Detail} />
接收参数：this.props.location.state
备注：刷新也可以保留参数

2021.5.56总结

1. push与replace

Link的默认跳转是push跳转，可以通过添加replace属性，更改为replace跳转
浏览器的回退记录是通过history来实现的

2. 编程式路由导航

借用this.props.history身上的api对路由的跳转，后退，前进进行操作

-this.props.history.push()
-this.props.history.replace()
-this.props.history.goBack()
-this.props.history.goForward()
-this.props.history.go()

3. 路由withRouter 的使用

在其他不包含路由的组件中接受不到history的参数，这时如果你想接收到的话，可以借助react-router-dom中的一个方法withRouter来进行接收。
export default withRouter(Test)

4. BrowserRouter和HashRouter的区别

1）底层原理不一样：
BrowserRouter使用的H5的history API ，不兼容IE9及以下版本
HashRouter使用的是URL的哈希值
2）Url的表现形式不一样
BrowserRouter的路径中没有#
HashRouter中的路径包含#
3）刷新页面后对state参数的影响
BrowserRouter没有任何影响，因为state保存在history中
HashRouter刷新页面后会导致参数的丢失
4）备注：HashRouter可以解决一些路径丢失的问题。比如：一些文件的引入链接

5. antd UI框架的引入

官网：https://ant.design/index-cn

2021.5.27总结

1. 纯函数

1.一类特别的函数，实参传入之后，函数的输出必须一样
2.必须遵守一些约定

1）不得改写参数数据
2）不会产生副作用，例如网络请求，输入和输出设备
3）不能调用Date.now()或者Date.random()等不纯的方法

3.redux的reducer必须是一个纯函数