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>
)
}
优化：文章来源：https://www.toymoban.com/news/detail-517856.html
const info = useMemo( () => {
return {
name: 'Even',
age: 22
}
},[])
useMemo可运用于复杂计算逻辑的场景文章来源地址https://www.toymoban.com/news/detail-517856.html
到了这里，关于React hooks之useEffect、useMemo优化技巧的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
