React学习笔记（二）

public ---- 静态资源文件夹

        favicon.icon ------ 网站页签图标

        index.html -------- 主页面

        logo192.png ------- logo图

        logo512.png ------- logo图

        manifest.json ----- 应用加壳的配置文件

        robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

        App.css -------- App组件的样式

        App.js --------- App组件

        App.test.js ---- 用于给App做测试

        index.css ------ 样式

index.js ------- 入口文件

        logo.svg ------- logo图

        reportWebVitals.js

                --- 页面性能分析文件(需要web-vitals库的支持)

        setupTests.js

                ---- 组件单元测试的文件(需要jest-dom库的支持)

1.1.4 功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件

2. 实现静态组件: 使用组件实现静态页面效果

3. 实现动态组件

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

3.2 交互(从绑定事件监听开始)

第二章：React ajax

2.1 理解

2.1.1 前置说明

React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)

2.1.2 常用的ajax请求库

1. jQuery: 比较重, 如果需要另外引入不建议使用

2. axios: 轻量级, 建议使用

封装XmlHttpRequest对象的ajax
promise风格
可以用在浏览器端和node服务器端

2.2 react脚手架配置代理

方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

第二步：编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。

2.3 消息订阅-发布机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
1. import PubSub from 'pubsub-js' //引入
2. PubSub.publish('delete', data) //发布消息
3. PubSub.subscribe('delete', function(data){ }); //订阅

2.4 扩展：Fetch

2.4.1 特点

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持

2.4.2 相关API

1. GET请求

fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  });

2. POST请求

  fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })

2.5 总结

1. 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办

2. ES6小知识点：解构赋值+重命名

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

3. 消息订阅与发布机制

1）先订阅，再发布（理解：有一种隔空对话的感觉）

2）适用于任意组件间通信

3）要在组件的componentWillUnmount中取消订阅

4. fetch发送请求（关注分离的设计思想）

try{
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
} catch (error) {
    console.log('请求出错', error)
}

第三章：React路由

3.1 相关理解

3.1.1 SPA的理解

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

3.1.2 路由的理解

1. 什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

2. 路由分类

1）后端路由：

工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
注册路由： router.get(path, function(req, res))
理解： value是function, 用来处理客户端提交的请求。

2）前端路由：

浏览器端路由，value是component，用于展示页面内容。
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

3.1.3 react-router-dom的理解

react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。

3.2 路由的基本使用

1. 明确好界面中的导航区、展示区

2. 导航区的a标签改为Link标签

3. 展示区写Route

4. <App>的最外层包裹一个<BrowserRouter>或<HashRouter>

一、路由组件与一般组件

1. 写法不同：

一般组件：<Demo/>

路由组件：<Route path="/demo" component={Demo}></Route>

2. 存放位置不同：

一般组件：components

路由组件：pages

3. 接收到的props不同：

一般组件：写组件标签时传递了什么，就能收到什么

路由组件：接收到三个固定属性

1. history:

go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)

2. location:

pathname: "/about"
search: ""
state: undefined

3. match:

params: {}
path: "/about"
url: "/about"

二、NavLink与封装NavLink

1. NavLink可以实现路由链接的高亮，通过activeClassName制定样式名

2. 标签体内容是一个特殊的标签属性

3. 通过this.props.children可以获取标签体内容

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class index extends Component {
  render() {
    return (
      <NavLink activeClassName='abc' className="list-group-item" {...this.props} />
    )
  }
}

三、Switch的使用

1. 通常情况下，path和component是一一对应的的关系

2. Switch可以提高路由匹配效率（单一匹配）

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

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

1. public/index.html 中引入样式时不写 ./ 写 / (常用)

2. public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL%

3. 使用HashRouter

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

1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含【匹配的路径】，且顺序要一致）

2. 开启严格匹配：<Route exact={true} path="/about" component={About}></Route>

3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

六、Redirect的使用

1. 一般写在所有路由注册的最下方，当所有的路由都无法匹配时，跳转到Redirect指定的路由

2. 具体的编码：

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

七、嵌套路由

1. 注册子路由时要写上父路由的path值

2. 路由的匹配是按照注册路由的顺序进行的

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

八、向路由组件传递参数

1. params参数

路由链接（携带参数）：