父组件重新渲染会递归所有的子,触发子组件的渲染,需要用useMemo
@reduxjs/toolkit useSelector useDispatch 替代了 connect
import { createSelector } from '@reduxjs/toolkit'
import { useDispatch, useSelector } from 'react-redux'
方案一、// 更新数据更精准
const selectUser = createSelector(
(state: any) => state.user,
(user) => user.name,
)
const name = useSelector(selectUser)
方案二、//更精准更新
// const { name } = useSelector((state: any) => state.user) 由于进行对比为 严格对比 === ;引用类型 需要对比引用地址,所以需要使用createSelector
// const { name } = useSelector((state: any) => state.user,shallowEqual) // shallowEqual 浅比较
useId 横跨服务端和客户端唯一Id避免hydration不匹配的
hook(无论渲染多少次始终唯一)。
hydration注入 把原来时间绑定和页面切换
ssr服务端渲染
csr客户端渲染
首屏加载速度/seo
域名 判断换成 通过dns解析,IP地址,通过tcp建立连接(三次握手)返回index.html
ssr同构应用,一套代码即可以运行node服务端,也可以在浏览器运行
const [data, setData] = useState<SelectProps['options']>([])
const [value, setValue] = useState<string>()
const deferredValue = useDeferredValue(data)
const [isPending, startTransition] = useTransition()
迭代器
// 原始伪代码
var nums =[]
var iterator = {
next(){
if(index<nums.length){
return {value:nums[index++],done:false}
}else{
return {value:undefined,done:true}
}
}
}
// 封装类
class Iterator {
constructor(container){
this.container = container
this.index = -1
}
next(){
this.index++
let {container,index} = this
if(index>=container.length){
return {done:true,value:undefined}
}
return {done:false,value:container[index]}
}
}
可迭代对象 (for of)
1.[Symbol.iterator]函数
2.[Symbol.iterator]函数返回迭代器
3.数组,Set,Map, arguments,string
把一个非可迭代对象转为迭代对象
Object.prototype.[Symbol.iterator] = Arrary.prototype.[Symbol.iterator]
//生成器
- next
- throw
- return
//形式
function * test(){
var = value=1
yield value++
}
传参数时 第一次是没办法获取
function *fn(...params){
let x = 100
let y = yield x+100
yield y+100
}
var s = fn('hah')
s.next('hah0')
s.next('hah1')
//嵌套
function * sum{
yield 200
yield 300
}
function * fn{
yield 100
yield *sum()
yield 400
}
100 200 300 400
let arr = ['js','html','css']
function *genera(){
yield * arr
}