# staging_0415

**Repository Path**: tianyucoder/staging_0415

## Basic Information

- **Project Name**: staging_0415
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-17
- **Last Updated**: 2021-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

## 1.脚手架自带文件
```
	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 --- 进行页面性能分析
			setupTests.js ---- 用于测试的文件
```
## 2.一个简单的组件

 1.所有组件有一个外壳组件 —— App
 2.除了App组件，所有其他的组件要放在components文件夹中
 3.components文件夹结构：一个组件就是一个文件夹，文件夹中包含：结构、样式等等
 		即：components：
		 			例如：Weather文件夹
					    	```index.jsx 或 Weather.jsx```
							```index.css 或 Weather.css```

## 3.样式的模块化

1. 给css文件命名时：写成```xxxx.module.css```

2. 引入样式

   ```js
   import weatherStyle from './index.module.css'
   ```

3. 使用样式

   ```html
   <div className={weatherStyle.demo}>
   ```

## 4.状态提升

1. 如果状态是某个组件用，则直接放在自身的state中
2. 如果状态是某些组件用，则放在他们共同的父组件中
3. 状态在哪里，操作状态的方法就在哪里

## 5.TodoList案例
1. 拆分组件时，要拆到位，结构、样式都要拆。
2. 组件化编码流程：
    		1. 拆分组件: 拆分界面,抽取组件
   2. 实现静态组件: 使用组件实现静态页面效果
   3. 实现动态组件
        (1). 动态显示初始化数据
         			数据类型
         			数据名称
         			保存在哪
        (2). 交互(从绑定事件监听开始)
3. ```src/App.css```或```src/index.css```放程序员写的公共样式。
4. ```eslint-disable-next-line```可以关闭eslint对下一行代码的语法检查。
5. ```/* eslint-disable */```可以关闭eslint语法检查。
6. 关于react中```<input type="checkbox">```的checked属性与defaultChecked
    				1.checked属性，时时刻刻起作用，而且必须配合disabled或onChange使用，否则就不能改了。
    				2.defaultChecked属性，只起一次作用，可以单独使用 （不建议使用）
7. 关于父子之间通信：
    					1.【父组件】给【子组件】传递数据：通过props传递。
        					2.【子组件】给【父组件】传递数据：通过props传递，(要求父提前给子传递一个函数)。
8. 熟练使用数组的reduce方法。

## 6.配置代理

### 方法一

> 在package.json中追加如下配置

```json
"proxy":"http://localhost:5000"
```

说明：

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

### 方法二

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

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

2. 编写setupProxy.js配置具体代理规则：

   ```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': ''}
       })
     )
   }
   ```

说明：

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

## 7.消息订阅与发布

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

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

3. ```componentDidMount```中订阅消息，```componentWillUnmount```中取消订阅

4. 具体编码：

   1. 需要数据的组件中订阅消息:

      ```js
      import PubSub from 'pubsub-js'
      //......
      componentDidMount(){
          //订阅消息
          this.pid = PubSub.subscribe('peiqi',(_,data)=>{
              console.log('我是Weather组件，我收到了数据：',data)
              this.setState({name:data})
          })
      }
      //......
      componentWillUnmount(){
          PubSub.unsubscribe(this.pid)
      }
      ```

   2. 提供数据的组件中发布消息：

      ```js
      PubSub.publish('peiqi',this.state.name)
      ```

## 8.路由的基本使用

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

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

   ```html
   <Link to="/xxxxx">Demo</Link>
   ```

3. 展示区写Route标签进行路径的匹配

   ```html
   <Route path='/xxxx' component={Demo}/>
   ```
   
4. ```<App>```的最外侧包裹了一个```<BrowserRouter>```或```<HashRouter>```

## 9.NavLink与封装NavLink

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

## 10.路由组件与一般组件

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

## 11.样式丢失的问题

​		当路由出现多层级时，可能会出现第三方样式丢失问题，解决方案如下：

1. public/index.html 中 引入样式时不写``` ./ ```写 ```/ ```
2. public/index.html 中 引入样式时不写 ```./ ```写 ```%PUBLIC_URL%``` 
3. 使用```HashRouter```

## 12.严格匹配与模糊匹配

1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2. 开启严格匹配：```<Route exact={true} path="/about" component={About}/>```
3. 严格匹配不要随便开启，需要再开，否则会导致无法继续匹配二级路由

## 13.嵌套路由

1. 注册子路由时要写上父路由的path值
2. 路由的匹配是按照顺序进行的

## 14.路由组件的参数

1. params参数
   			路由链接(携带参数)：```<Link to='/demo/test/tom/18'}>详情</Link>```
      			注册路由(声明接收)：```<Route path="/demo/test/:name/:age" component={Test}/>```
      			接收参数：```this.props.match.params```
2. search参数
   			路由链接(携带参数)：```<Link to='/demo/test?name=tom&age=18'}>详情</Link>```
      			注册路由(无需声明，正常注册即可)：```<Route path="/demo/test" component={Test}/>```
      			接收参数：```this.props.location.search```
      			备注：获取到的search是urlencoded编码字符串，需要借助```querystring```解析
3. state参数
   			路由链接(携带参数)：```<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>```
      			注册路由(无需声明，正常注册即可)：```<Route path="/demo/test" component={Test}/>```
      			接收参数：```this.props.location.state```
      			备注：刷新也可以保留住参数

## 15.编程式路由导航

​	借助this.prosp.history对象上的API对操作路由跳转、前进、后退

- this.prosp.history.push()
- this.prosp.history.replace()
- this.prosp.history.goBack()
- this.prosp.history.go()

## 16.BrowserRouter与HashRouter的区别

1. 底层原理不一样：
   				BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
   				HashRouter使用的是URL的哈希值。
2. path表现形式不一样
   				BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
   				HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3. 刷新后对路由state参数的影响
   				BrowserRouter没有任何影响，因为state保存在history对象中。
   				HashRouter刷新后会导致路由state参数的丢失！！！
4. 备注：HashRouter可以解决样式丢失问题