1.useEffect

useEffect使用JSON.stringfy進(jìn)行過濾，避免重復(fù)執(zhí)行

const [list, setList] = useState<Array<string>>([]);
useEffect(() => {
    console.log('123');
}, [JSON.stringify(list)])

// 偽代碼，改變list
list = [1, 2, 3]

將數(shù)組直接放入依賴數(shù)組可能不會(huì)按預(yù)期工作，因?yàn)閿?shù)組比較是基于引用而不是內(nèi)容。也就是說，如果數(shù)組引用沒有變，即使數(shù)組內(nèi)容發(fā)生了變化，副作用也不會(huì)重新運(yùn)行。或者數(shù)組內(nèi)餓哦那個(gè)沒有改變但是引用卻發(fā)生變化時(shí)，會(huì)重復(fù)執(zhí)行。但需要注意的是，JSON.stringify 可能會(huì)影響性能，特別是在大型數(shù)組或頻繁更新的情況下。

2.useMemo

子組件包裹一個(gè)memo，但是會(huì)重新渲染, 因?yàn)槎x的info是const定義的一個(gè)局部變量,每次重新渲染都是重新定義一個(gè)新的info，然后子組件進(jìn)行淺層比較時(shí)候，info永遠(yuǎn)是不一樣的，所以就會(huì)重新渲染。如果子組件比較復(fù)雜的情況下，那么就會(huì)對頁面性能產(chǎn)生影響

const Child = memo( () => {
  console.log('我是子組件')
  return <p>我是子組件</p>
})


function Parent() {
  const [show,setShow] = useState(true)
  const info = {
    name: 'Even',
    age: 22
  }


  return(
    <div>
    <Child info={ info } />
    <button onClick={ () => setShow(!show) }>點(diǎn)擊更新狀態(tài)</button>
    </div>
  )
}

優(yōu)化：

const info = useMemo( () => {
  return {
      name: 'Even',
      age: 22
  }
},[])

useMemo可運(yùn)用于復(fù)雜計(jì)算邏輯的場景