值的注意React中的一些默认行为和优化(一)

父组件重新渲染会递归所有的子，触发子组件的渲染，需要用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
}