******目录在网页右上角或者左下角板块*****
【一】Immer
immer 是一个用 C ++ 编写的可持久化和不可更改的数据结构库。
-
可持久化意味着修改数据结构时，将保留旧值。
-
不可更改意味着所有的操作方法都是 const。
对象不会在适当位置修改，但会返回新值。 因为旧值仍然存在并且永远不会改变，所以新值可以透明地保持对它的公共部分的引用。 这个属性被称为结构共享。
【二】Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等。
它的模块化方法非常适合：
- 迭代数组，对象和字符串
- 操作和测试值
- 创建复合功能
(1) isFunction: 判断是否是function类型
(2)节流：throttle: 函数在多少时间内最多执行一次
【三】hooks----useRef / useImperativeHandle
转载大佬：react hooks 之 useRef, useImperativeHandle - 饭饭大人 - 博客园
【四】Antd版本升级的一些坑或者其他坑
1、Warning: callback is deprecated. Please return a promise instead.
新版的Antd使用了React的hooks，表单中的字段校验方法进行了一些修改，原来的回调方法改成了返回一个Promise对象。
2.A valid state object (or null) must be returned. You have returned undefined.
必须返回一个有效的状态，而这里啥也没有返回,是undefined.
3.tips： 迁移升级版本时，如果要废弃一个方法，可以在废弃的方法上打印一个提醒方法，方便于开发者定位到方法，并有效替换新方法。
【五】.react-router加载模块方法
【六】Sass的变量
【七】useRef 与全部变量的区别演示
页面中，引入3个组件
操作步骤，依次往下点3次，并在最后一个再多点2次
区别：
全局声明的，会统计所有用到组件的地方的点击次数；
useRef, 只会统计组件内部的
【八】同步与异步的兼容
【九】从ahooks高阶hooks学到的业务场景
1. 点击刷新或下拉刷新等操作，使用上一次同样的参数，重新发起请求。
//在页面首次渲染的时候，请求一次渲染id为1的接口。
useEffect(() => {
run(1);
}, []);
const { data, loading, run, refresh } = useRequest((id: number) => getUsername(id), {
manual: true,
});
//暴露了loading状态，接口请求中，可以展示“正在加载”
if (loading) {
return <div>loading...</div>;
}
//点击刷新，可以直接以上次的参数，再次请求数据
<button onClick={refresh} type="button">
Refresh
</button>
【十】js手写发布订阅（简易版）
JS
class Observer {
constructor() {
this.store = {} // 存储消息
}
/**
* `$on` 消息列表监听
* @param {*} type 事件名 (事件类型)
* @param {*} callback 回调函数
*/
$on(type, callback) {
// 判断有没有这个属性（事件类型）
if (!this.store[type]) {
// 如果没有这个属性，就初始化一个空的数组
this.store[type] = [];
}
// 如果有这个属性，就往他的后面push一个新的callback
this.store[type].push(callback)
}
// 删除消息队列里的内容 `$off`
$off(type, callback) {
//如果store里面存在type的事件，才执行
if(this.store[type]) {
if(callback) {
this.store[type] = this.store[type]?.filter((item) => item !== callback);
}else {
delete this.store[type]
}
}
}
// 触发消息队列里的内容 `$emit`--依次执行
$emit(type) {
if(this.store[type]) {
this.store[type].forEach(element => {
element()
});
}
}
}
function handlerA() {
console.log('handlerA');
}
function handlerB() {
console.log('handlerB');
}
function handlerC() {
console.log('handlerC');
}
/*********************************************** */
// 使用构造函数创建一个实例
const person1 = new Observer();
//! 监听
person1.$on('buy', handlerA);
person1.$on('buy', handlerB);
person1.$on('sort', handlerC);
//! 删除
person1.$off('buy');
//! 触发
person1.$emit('sort');
console.log('输出', person1);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入pubsub.js文件 -->
<script src="./pubsub.js"></script>
</body>
</html>
效果：
【十一】垃圾回收机制和内存泄露
【十二】闭包与作用域与滥用闭包的影响
【十三】如何操作不可变数据
【十四】react-router基础API
【十五】封装form表单组件以及表单引导组件实现
【十六】等待异步的返回结果
[十七] 在JavaScript数组中找到最小元素的位置（3种方法）
export function findLowestIndex(arrs) {
let min = arrs[0]
for (let i = 1, ilen = arrs.length; i < ilen; i += 1) {
if (arrs[i] < min) {
min = arrs[i]
}
}
return arrs.indexOf(min)
}【十八】正则删除字符串首位的指定字符（多个指定字符）
const str = e.detail.value.replace(/^(\s|·|•)+|(\s|·|•)+$/g, '')【十九】一维数组转二维数据
data.forEach((item) => {
const date = dayjs((item?.collect_time || 0) * 1000).format('YYYY.MM.DD')
const index = newArr.findIndex((i) => i.dateTitle === date)
if (index > -1) {
newArr[index].data.push(item)
} else {
newArr.push({
dateTitle: date,
data: [item],
})
}
})【二十】循环遍历的优化
【二十一】async await函数 与promise的报错机制处理async 函数
https://es6.ruanyifeng.com/?search=class&x=0&y=0#docs/async
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
