Hello React day1

学习React基础的第一天

Day one

PubSubJs(消息的发布与订阅)

安装： npm install pubsub-js
使用： import PubSub from 'pubsub-js'
//注意这里的callback接收的第一个参数为订阅的消息名！！！
订阅： let token = PubSub.subscribe('MY TOPIC', callback);
//第一个参数为消息名，后面参数为传递的值
发布： PubSub.publish('MY TOPIC', 'hello world!');
//取消类似定时器的取消
取消： PubSub.unsubscribe(token);

fetch的基本用法(优化写法)

    try {
            let result = await fetch(`https://api.github.com/search/users?q=${value}`)  
            //返回的是一个Promise 通过await拿到结果是一个response对象
            //数据在这个对象的response.json()方法中，但是这个也是一个promise
            //再次使用await，这样得到的就是那个数据对象
            let data = await result.json()   
            PubSub.publish('changeState', { mainValue: data.items, loading: false })
        } catch (error) {
            PubSub.publish('changeState', { loading: false, err: error.message })
    }

• fetch原生函数（存在兼容性问题）与XmlHttpRequest属于同级
• axios，jq中的$ajax都是基于xmlHttpRequest封装的

对象解构赋值

let obj = {a:{b:123}
cosnt {a} = obj  //普通解构
cosnt {a:{b}} = obj // 深度解构
cosnt {a:{b:value}} = obj  //深度解构加重命名

react-router-dom的基本使用

import { Link,Route,Routes } from "react-router-dom"
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link className="xxxx" to='/about'>yyyy</Link>
3.展示区写Routes和Route标签进行路由的匹配
//新版本写法
<Routes>
    <Route path='/about' element={<About />} />
    <Route path='/home' element={<Home />} />
</Routes>

//app.js 
import {BrowserRouter } from "react-router-dom"
4.app的最外层包裹一个 <BrowserRouter> 或者<HashBrowser>

路由组件与一般组件

​ 1.写法不同

​ 一般组件：<Demo />

​ 路由组件：<Route path='/about' 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"