react hook性能优化使用memo、useCallback、useMemo

前言:1、在使用到值的时候,直接使用memo包裹子组件即可,最简单

2、当子组件用到父组件的函数时候(有传函数)使用useCallback包裹函数即可,可以理解为每次父组件上面的参数发生变化时候,传入子组件的函数也会重新生成,造成子组件重新渲染。这时候需要优化使用useCallback,它的依赖的第二个参数变化时候才会重新生成这个函数。然后使子组件重新渲染。

3、当父组件传值给子组件时候,例如对象:{name:我是名字}加上useMemo可以优化减少子组件的重复无用渲染

可以参考一下这篇文章:https://blog.csdn.net/weixin_43902189/article/details/99689963

自己写一下就很清晰明了了。追求极致的可以先使用。学习成本不高。

区别在于一个优化传入的函数、一个是优化传入的object参数。

注意:react官方提出未来可能自动创建useCallback、useMemo的第二个参数数组成为可能。

所以深究也没多大意思,明白怎么使用怎么写就可以了

猜你喜欢

转载自www.cnblogs.com/seemoon/p/12792987.html
今日推荐