# react_staging_201125

**Repository Path**: tianyucoder/react_staging_201125

## Basic Information

- **Project Name**: react_staging_201125
- **Description**: tianyucoder/react_staging_201125
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-16
- **Last Updated**: 2022-03-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
					--- 页面性能分析文件(需要web-vitals库的支持)
				setupTests.js
					---- 组件单元测试的文件(需要jest-dom库的支持)

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

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

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


## 5.配置代理
		参考配置代理文档【react脚手架配置代理.md】即可

## 6.github搜索案例
		1.拆分静态组件,设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
		2.分析得知：Search组件负责搜索，List组件负责展示，状态要交给App
		3.List组件不仅要展示用户信息，还要展示：欢迎词、loading、错误信息
		4.在App中设计一个方法：getSearchInfo去更新App的状态，一个一个写太麻烦
		5.批量的给List组件传递参数：<List {...this.state}/>
		6.在List中用三目运算符进行连续判断，从而决定List组件展示什么
 
## 7.消息订阅与发布机制
			1.先订阅，再发布（理解：有一种隔空对话的感觉）
			2.适用于任意组件间通信
			3.componentDidMount中订阅消息，要在组件的componentWillUnmount中取消订阅

## 8.路由的基本使用
		1.明确好界面中的导航区、展示区
		2.导航区的a标签改为Link标签
					<Link to="/xxxxx">Demo</Link>
		3.展示区写Route标签进行路径的匹配
					<Route path='/xxxx' component={Demo}/>
		4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

## 9.NavLink的使用
			1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

## 10.路由组件和一般组件的区别
			1.使用方式不同：
					(1).一般组件:靠程序员亲自写组件标签去渲染，例如:<Demo/>
					(2).路由组件:靠路由器进行路径的匹配，从而渲染的

			2.存放文件夹不同：
					(1).一般组件:components
					(2).路由组件:pages

			3.收到的props不同
					(1).一般组件:程序员写组件标签时传入了什么，那么props中的内容就是什么，例如：<Demo a="1" msg="hello"/>
					(2).路由组件:会收到固定的几个props，如下：
							history:
								go: ƒ go(n)
								goBack: ƒ goBack()
								goForward: ƒ goForward()
								location: {pathname: "/about", search: "", hash: "", state: null, key: "1f5ocf"}
								push: ƒ push(path, state) //控制路由跳转
								replace: ƒ replace(path, state) //控制路由跳转

							location:
								pathname: "/about"
								search: "" //专门用于接收路由search参数
								state: null // 专门用于接收路由state参数

							match:
								params: {}  //专门用于接收路由params参数
								path: "/about"
								url: "/about"


## 11.路由的严格匹配与模糊匹配
				1.默认使用的是模糊匹配
				2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
				3.一定要谨慎开启严格匹配模式，因为一旦开启严格匹配会造成该路由的所有子路由全部失效

## 12.多级路由的使用
			注册二级路由时，必须包含一级路由的路径

## 13.路由传参
				1.params参数（只能在路径中拼接进去，即：to只能写字符串）
							通过路由链接携带参数：<Link to='/demo/test/tom/18'}>详情</Link>
							注册路由(一定要声明接收！！！)：<Route path="/demo/test/:name/:age" component={Test}/>
							接收参数：this.props.match.params

				2.search参数（可以路径中拼接，或把to写成对象，靠search属性传递）
							通过路由链接携带参数：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
							注册路由(无需声明接收)：<Route path="/demo/test" component={Test}/>
							接收参数：this.props.location.search
							备注：需要借助querystring进行解析
							
				3.state参数（只能把to写成对象，靠state属性传递）
							路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}}>详情</Link>
							注册路由(无需声明接收)：<Route path="/demo/test" component={Test}/>
							接收参数：this.props.location.state
				


## 14.Redirect的使用
			1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
			2.具体编码：
					<Switch>
						<Route path="/about" component={About}/>
						<Route path="/home" component={Home}/>
						<Redirect to="/about"/>
					</Switch>


## 15.HashRouter
		1.兼容性相对好一些
		2.路径包含#
		3.不允许连续跳转两个相同的路由，从而导致state参数无法二次传递