1.useEffect

useEffect使用JSON.stringfy進行過濾，避免重復執行

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

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

將數組直接放入依賴數組可能不會按預期工作，因為數組比較是基于引用而不是內容。也就是說，如果數組引用沒有變，即使數組內容發生了變化，副作用也不會重新運行?；蛘邤到M內餓哦那個沒有改變但是引用卻發生變化時，會重復執行。但需要注意的是，JSON.stringify 可能會影響性能，特別是在大型數組或頻繁更新的情況下。

2.useMemo

子組件包裹一個memo，但是會重新渲染, 因為定義的info是const定義的一個局部變量,每次重新渲染都是重新定義一個新的info，然后子組件進行淺層比較時候，info永遠是不一樣的，所以就會重新渲染。如果子組件比較復雜的情況下，那么就會對頁面性能產生影響

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) }>點擊更新狀態</button>
    </div>
  )
}

優化：

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

useMemo可運用于復雜計算邏輯的場景