react基础详细介绍（消息订阅-发布机制、ajax请求、路由基础知识）
一、消息订阅-发布机制
1、工具库：PubSubJS
2、下载：npm i pubsub-js --save
3、使用：
import PubSub from ‘pubsub-js’;//引入
PubSub.subscribe(‘delete’,function(data){});//订阅
PubSub.publish(‘delete’,data);//发布消息
二、连续解构赋值
let obj = {
a:{
b:{
c:1}}};
let obj2= {
a:{
b:1}};
console.log(obj.a.b.c);
const {
a:{
b:{
c}}} = obj;
//连续解构赋值
console.log(c);
//连续解构赋值加上重命名
const {
a:{
b:data}} = obj2;
console.log(data)
三、基于react搜索小案例
发布—订阅：
（1）List什么时候订阅消息合适？
在页面渲染完成时进行订阅
import PubSub from 'pubsub-js';
componentDidMount(){
//第一个参数订阅的名称，第二个参数回调函数
this.token = PhbSub.subscribe('atguigu',(_,stateObj)=>{
this.setState(stateObj)
})}
//组件卸载的时候，将订阅消息取消掉
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}
(2)Header代码
import PubSub from 'pubsub-js';
search = ()=>{
//第一个参数发布的名称，第二个参数为：所要传递的数据
PubSub.publish('atguigu',{
isFirst：false})
}
四、ajax请求方式？
1、xhr最原始的方式
2、jQuery是对xhr的封装
3、axios是对xhr的封装
4、fetch是window内置
五、fetch
1、特点：
原生函数，不在使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持
2、代码片段：
(1)为优化版本：
//发送网络请求，使用fetch方法
fetch('发送的地址').then(res=>{
//res.json()返回的是Promise实例对象
console.log('联系服务器成功了',res.json())；
return res.json()
},err=>{
console.log('联系服务器失败了');
return new Promise(()=>{
})
}).then(res=>{
console.log('获取数据成功了'，res)
},err=>{
console.log('获取数据失败了'，err)
})
（2）优化版本：
//发送网络请求，使用fetch方法
fetch('发送的地址').then(res=>{
console.log('联系服务器成功了',res.json())；
return res.json()
}).then(res=>{
console.log('获取数据成功了'，res)
}).catch(
(err) =>{
console.log(err)
}
)
(3)优化版本：
//发送网络请求，使用fetch方法
try{
const response = await fetch('发送的地址');
const data = await response.json();
console.log(data);
}catch(error){
console.log('请求出错'，error)
}
六、基于react搜索小案例相关知识点
1、设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办？
2、ES6小知识点：解构赋值+重命名
3、消息订阅与发布：
（1）先订阅，在发布（理解：有一种隔空对话的感觉）
（2）适用于任意组件间通信
（3）要在组件的componentWillUnmount中取消订阅
4、fetch发送请求（关注分离的设计思想）
try{
const response = await fetch(‘发送的地址’);
const data = await response.json();
console.log(data);
}catch(error){
console.log(‘请求出错’，error)
}
七、路由的基本使用
1、明确好界面中的导航区域、展示区
2、导航区的a标签进行路径的切换
Demo3、展示区写Route标签进行路径的匹配
4、的最外侧包裹了一个或
八、路由组件与一般组件
1、路由注册
2、在React中靠路由链接实现切换组件–编写路由链接
3、路由组件和一般组件最大的区别是：可以收到传递过来的props，这里面需要关注的有：history/location/match
4、写法不同：
一般组件：
路由组件：
5、存放位置不同：
一般组件：components
路由组件：pages
6、接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性history/location/match
history:
go();
gouBack();
goForward();
push();
repalce();
location:
pathname:'/about'
search:''
state:undefined
match:
params:{};
path:'/about';
url:'/about'
7、想要高亮的效果,则需要将Link修改为NavLink：
About
Home
九、NavLink与封装NavLink
1、NavLink可以实现路由链家的高亮，通过activeClassName指定样式名
2、标签体内容是一个特殊的标签属性
3、通过this.props.children可以获取标签体内容
十、Switch组件
1、在注册多个路由的时候，使用Switch组件进行包裹,，可以达到只要匹配到组件，即停止；
2、通常情况下，path和component是一对一的关系
3、Switch可以提高路由匹配效率（单一匹配）
十一、解决多级路径页面样式丢失的问题
1、将引入样式中的点去掉即可publilc/index.html
2、publilc/index.htm
书写的是绝对路径，由于是绝对类路径，所以一定不会出现问题；
3、在不改变点的情况下
将改为
十二、路由的严格匹配和模糊匹配
1、
以上是模糊匹配；
默认使用的是模糊匹配（简单记：【输入的路径】需要包含要【匹配的路径】，且顺序要一致）；
2、、
严格匹配；
3、严格匹配不要随便开启，需要在开，有些时候开启会导致无法继续匹配二级路由
十三、Redirect的使用
一般写正在所有路由注册的最下方，当所有的路由都无法匹配的时候，跳转到Redirect指定的路由
<Switch>
<Route path='/about' component={
About}></Route>
<Route path='/home' component={
Home}></Route>
<Redirect to='/home'/>
</Switch>
十四、嵌套路由
注册子路由时写上父路由的path值
路由的匹配是按照注册路由的顺序进行的
十五、向路由组件传递params数据
ajax:query/params/body
body:urlencode/json
//携带params参数
{item.title}//声明接收params参数
在子组件利用：this.props.match.params可以拿到具体值
路由链接（携带参数）：详情
注册路由（声明接收）：十六、search参数
{item.title}//search参数无需声明接收，正常注册路由即可
//接收search参数
import qs from ’querystring’
let obj = {name:'tom',age:18} // name=tom&age = 18；urlencode编码形式
console.log(qs.stringfy(obj));
let str = 'carName = 奔驰&price = 199';
console.log(qs.parse(str))
const {search} = this.props.location
const result = qs.parse(search.slice(1))//将前面的问号截取掉
备注：获取到的search是urlencode编码字符串，需要借助querystring解析
十七、state参数
//向路由组件传递state参数
{item.title}
//state参数无需声明接收，正常注册路由即可
十八、push和repalce模式
十九、编程式路由导航
借助this.props.history对象上的API对操作路由跳转、前进、后退
this.props.history.push();
this.props.history.replace();
this.props.history.goBack();
this.props.history.goForward();
this.props.history.go();
replaceShow = (id,title) =>{
//replace跳转+携带params参数
this.props.history.replace('/home/message/detail/${id}/${title}')
//replace跳转+携带search参数
this.props.history.replace('/home/message/detail？id=${id}$title = ${title}')
//replace跳转+携带state参数
this.props.history.replace(`/home/message/detail`,{
id,title})
}
<Button onClick={
()=>{
this.replaceShow(id,title)}}></Button>
pushShow = (id,title) =>{
//push跳转+携带params参数
this.props.history.push('/home/message/detail/${id}/${title}')
}
二十、withRouter的使用
可以加工一般组件，让一般组件具备路由组件所特有的API，返回值是一个新组件
import {withRouter} from ‘react-router-dom’
export default withRouter(Header)