值的注意React中的一些默认行为和优化(一)
父组件重新渲染会递归所有的子，触发子组件的渲染，需要用useMemo
@reduxjs/toolkit useSelector useDispatch 替代了 connectimport { 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 = containerthis.index = -1}next(){this.index++let {container,index} = thisif(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=1yield value++
}传参数时 第一次是没办法获取
function *fn(...params){let x = 100
let y = yield x+100yield y+100}
var s = fn('hah')
s.next('hah0')
s.next('hah1')//嵌套
function * sum{yield 200yield 300
}function * fn{yield 100yield *sum()yield 400
}100 200 300 400let arr = ['js','html','css']function *genera(){yield * arr
}