一导航
import { Link, useNavigate } from 'react-router-dom'
1. Link
用法
<Link to="/register">已有账号？前往登录</Link>
2. useNavigate 跳转
在组件顶部声明
const navigate = useNavigate()
使用
setTimeout(()=>navigate('/login'), 1500)
可以携带大量参数 使用的是state
二 状态 useState
引入
import React, { useEffect, useState } from 'react'
用法
const [defaultKey, setDefaultKey] = useState('')
三 路由路径 和参数useLocation
引入
import { useLocation } from 'react-router-dom'
用法
const { pathname } = useLocation()
四 缓存 localStorage
1. 设值
// 存储数据
localStorage.setItem('avatar', res.data.avatar)
localStorage.setItem('cms-token', res.data['cms-token'])
localStorage.setItem('editable', res.data.editable)
2 . 取值
let username1 = localStorage.getItem('username')
let avatar1 = localStorage.getItem('avatar')
3. 清空
localStorage.clear(); // 清除localStorage中的数据
五 用vscode 打开项目
cmd 找到目录,然后用下面的语句就可以打开
code .
六 useEffect
引入
import React, { useEffect, useState } from 'react'
{} 花括号是解构
useEffect(()=>{
let path = location.pathname;
let key = path.split('/')[1];
setDefaultKey(key)
}, [location.pathname])
[location.pathname] 这个就可以试试监听变化，从而使页面发生改变
useEffect(()=>{
GetUserDataApi().then(res=>{
console.log(res)
if(res.errCode===0){
message.success(res.message)
// 存到sessionStorage
sessionStorage.setItem('username', res.data.username)
}
})
}, [])
[]为空 表示只不变化了
如果这个useEffect 函数里面还有返回，则表示销毁，这个要找例子，留心一下
七 获取路由参数useParams和useSearchParams
引入
import { useParams ,useSearchParams} from 'react-router-dom'useParams
使用 //不带问号的参数
const params = useParams()
if (params.id) {
// 更新文章的请求
ArticleUpdateApi({ title, subTitle, content, id: params.id }).then(res => dealData(res.errCode, res.message))
} else {
// 添加文章的请求
ArticleAddApi({ title, subTitle, content }).then(res => dealData(res.errCode, res.message))
}
带问号的参数
const params =useSearchParams()
八 axios有关请求
get请求参数必须解构
export const ArticleListApi = (params) => request.get('/article', {params})
九 其他
表示组件 只要是括号且有标签就表示是组件
这里两种写法
// 上传按钮
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
// 标题组件
function MyTitle(props) {
return (
<div>
<a className='table_title' href={"http://codesohigh.com:8765/article/" + props.id} target="_blank">{props.title}</a>
<p style={{ color: '#999' }}>{props.subTitle}</p>
</div>
)
}
内联样式 需要使用双{{}}花括号，其他赋值是单{}花括号
<div style={{ marginTop: 8 }}>Upload</div>
样式 100vh 和100vw
.container_content{
height: calc(100vh - 210px);
overflow: hidden;
}
}
.login{
background: #fff;
width: 100vw;
height: 100vh;
position: relative;
.login_box{
width: 450px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
img{
display: block;
margin: 0 auto 20px;
}
}
}
十 路由
引入
import { BrowserRouter as Router, Routes ,Route } from 'react-router-dom';
使用
const BasicRoute=()=>(
<Router>
<Routes>
<Route path="/" element={<App/>} >
<Route path="/list" element={<List/>} ></Route>
<Route path="/edit" element={<Edit/>} ></Route>
<Route path="/means" element={<Means/>} ></Route>
</Route>
<Route path="/login" element={<Login/>} ></Route>
<Route path="/register" element={<Register/>} ></Route>
</Routes>
</Router>
)
export default BasicRoute;
十一 详解TypeScript中type与interface的区别
参考 文档：www.jb51.net/article/243…
类型别名 type
首先认识一下什么是类型别名？
类型别名用来给一个类型起个新名字，使用 type 创建类型别名，类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集。让我们看一些例子：
type userName = string; // 基本类型
type userId = string | number; // 联合类型
type arr = number[];
// 对象类型
type Person = {
id: userId; // 可以使用定义类型
name: userName;
age: number;
gender: string;
isWebDev: boolean;
};
// 范型
type Tree<T> = { value: T };
const user: Person = {
id: "901",
name: "椿",
age: 22,
gender: "女",
isWebDev: false,
};
const numbers: arr = [1, 8, 9];
接口 interface
接口是命名数据结构（例如对象）的另一种方式；与type 不同，interface仅限于描述对象类型。
接口的声明语法也不同于类型别名的声明语法。让我们将上面的类型别名 Person 重写为接口声明：
interface Person {
id: userId;
name: userName;
age: number;
gender: string;
isWebDev: boolean;
}
interface和type的相似之处
在讨论二者区别之前， 首先看一下二者的相似之处（为何开发中，我们觉得用哪个都一样）
都可以描述 Object和Function
两者都可以用来描述对象或函数,但语法不同:
Type
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
Interface
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
二者都可以被继承
interface 和 type 都可以继承。
另一个值得注意的是，接口和类型别名并不互斥。类型别名可以继承接口，反之亦然。只是在实现形式上，稍微有些差别。
interface 继承 interface
interface Person{
name:string
}
interface Student extends Person { stuNo: number }
interface 继承 type
type Person{
name:string
}
interface Student extends Person { stuNo: number }
type 继承 type
type Person{
name:string
}
type Student = Person & { stuNo: number }
type 继承 interface
interface Person{
name:string
}
type Student = Person & { stuNo: number }
实现 implements
类可以实现interface 以及 type(除联合类型外)
interface ICat{
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
// todo
}
}
// type
type ICat = {
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
// todo
}
}
上面提到了特殊情况，类无法实现联合类型, 是什么意思呢？
type Person = { name: string; } | { setName(name:string): void };
// 无法对联合类型Person进行实现
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
name= "张三";
setName(name:string):void{
// todo
}
}
上面聊了interface与 type的相似之处， 接下来就来看看他们的区别。
二者区别
1. 定义基本类型别名
type可以定义基本类型别名, 但是interface无法定义,如：
type userName = string
type stuNo = number
...
2. 声明联合类型
type可以声明联合类型, 例如：
type Student = {stuNo: number} | {classId: number}
3. 声明元组
type可以声明 元组类型：
type Data = [number, string];
以上都是 type能做到， 而interface做不到的， 接下来聊聊type做不到的
4. 声明合并
如果你多次声明一个同名的接口，TypeScript 会将它们合并到一个声明中，并将它们视为一个接口。这称为声明合并， 例如：
interface Person { name: string }
interface Person { age: number }
let user: Person = {
name: "Tolu",
age: 0,
};
这种情况下，如果是type的话，重复使用Person是会报错的：
type Person { name: string };
// Error: 标识符“Person”重复。ts(2300)
type Person { age: number }
5. 索引签名问题
如果你经常使用TypeScript, 一定遇到过相似的错误：
Type 'xxx' is not assignable to type 'yyy'
Index signature is missing in type 'xxx'.
看个例子来理解问题：
interface propType{
[key: string] : string
}
let props: propType
type dataType = {
title: string
}
interface dataType1 {
title: string
}
const data: dataType = {title: "订单页面"}
const data1: dataType1 = {title: "订单页面"}
props = data
// Error:类型“dataType1”不可分配给类型“propType”; 类型“dataType1”中缺少索引签名
props = data1
我们发现dataType和dataType1对应的类型一样，但是interface定义的就赋值失败，是什么原因呢？刚开始百思不解，最后我在 stack overflow上找到了一个相似的问题：
并且很幸运的找到了有效的答案：
翻译过来的大致意思就是：
Record<string,string>与{[key:string]：string}相同。只有当该类型的所有属性都已知并且可以对照该索引签名进行检查时，才允许将子集分配给该索引签名类型。在您的例子中，从exampleType到Record<string,string>的所有内容都是可分配的。这只能针对对象字面量类型进行检查，因为一旦声明了对象字面量类型，就无法更改它们。因此，索引签名是已知的。
相反，在你使用interface去声明变量时，它们在那一刻类型并不是最终的类型。由于interfac可以进行声明合并，所以总有可能将新成员添加到同一个interface定义的类型上。
总结
官方推荐用 interface，其他无法满足需求的情况下用 type。
但其实，因为 联合类型 和 交叉类型 是很常用的，所以避免不了大量使用 type 的场景，一些复杂类型也需要通过组装后形成类型别名来使用。
所以，如果想保持代码统一，还是可选择使用 type。通过上面的对比，类型别名 其实可涵盖 interface 的大部分场景。
对于 React 组件中 props及 state，使用 type ，这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求，可通过 HOC二次封装。
编写三方库时使用interface，其更加灵活自动的类型合并可应对未知的复杂使用场景。
十二 useCallback
参考 www.cnblogs.com/sk-3/p/1380…
十三 删除文件
rm * 删除src 文件
十四 写法
就是只有一行的可以简写
第一种
<ul>
{
this.state.arr.map((item, index) => {
return (<li key={index}>
{item}
</li>)
})
}
</ul>
第二种
<ul>
{
this.state.arr.map((item, index) => (<li key={index}>{item} </li>))
}
</ul>
两个等价写法
function addNum(){
props.changeNum(10)
}
等价下面这个
const addNum=()=>props.changeNum(11);
十五 memo和useCallback，useMemo
参考视频：www.bilibili.com/video/BV1tY…
粗略理解，就是可以让子组件避免重复渲染
父组件中state（状态）改变，不受memo保护的子组件也会重新渲染 memo会检测props到改变来决定组件是否需要进行重新渲染，换言之就是，被memo函数包起来的组件只有本身的props被改变之后才会重新渲染 memo只能进行浅拷贝来校验决定是否触发重新渲染。所以改变数组（对象）的props时候记得返回一个全新的数组（对象） memo不是项目中所有的组件都需要包一下。包的太多反而会起反效果，我们需要选择那些经常被重新渲染的组件有选择性的去缓存。 原文链接：blog.csdn.net/qq_48637854…
const Child=memo((props)=>{
console.log("是否每次渲染")
return (<>
<button onClick={props.memoAdd}>累加数据</button>
</>)
})
// 如果是箭头函数 则需要加括号 ，这两个是等价效果
const Child=memo((props)=>{
console.log("是否每次渲染")
return (<>
<button onClick={()=>props.memoAdd()}>累加数据</button>
</>)
})
父组件
function App( ) {
const [memoNum,setMemoNum]=useState(1);
const memoAdd=useCallback(()=>setMemoNum(memoNum+1)) //每次还是更新输出——是否每次渲染
const memoAdd=useCallback(()=>setMemoNum(memoNum+1),[]) //更新了两次就不变了
const memoAdd=useCallback(()=>setMemoNum(memoNum+1),[]) //实现最终效果——不再输出是否每次渲染
return (
<div className="App">
<h2> {memoNum}</h2>
<Child memoAdd={memoAdd}></Child>
)}
使用 useMemo 实现相同效果
高阶函数
函数()() ——两个括号的是高阶函数
函数里面返回函数
const memoAdd=useMemo(()=> {
return ()=> setMemoNum(memoNum=>memoNum+1)
},[])
十六 404错误页面配置
路由应该使用通配符
十七 # redux 和react-redux
学会抽取公共部分
视频学习：www.bilibili.com/video/BV1ZK…
注意 store 订阅
视频截图
react-redux 使用提供器和连接器
十八 样式 user-select
user-select
参考 www.cnblogs.com/yusilu-2653… www.w3school.com.cn/cssref/pr_u…
