React hooks之useEffect、useMemo优化技巧

1.useEffect

useEffect使用JSON.stringfy进行过滤，避免重复执行

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

// 伪代码，改变list
list = [1, 2, 3]

将数组直接放入依赖数组可能不会按预期工作，因为数组比较是基于引用而不是内容。也就是说，如果数组引用没有变，即使数组内容发生了变化，副作用也不会重新运行。或者数组内饿哦那个没有改变但是引用却发生变化时，会重复执行。但需要注意的是，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可运用于复杂计算逻辑的场景