用React写函数组件,如何避免重复渲染?
2022-05-11 10:53:54

用React写函数组件,如何避免重复渲染?

 

场景:

有一个自定义的item组件, 它的onClick方法是父组件透传的。父组件中含有大量的item。

当父组件更新时,onClick会被重新创建,由于函数跟常量不一样,是一个引用,因此即使item用了React.memo包裹,也会认为props中传过来的onClick是新创建的,导致所有item都会重新渲染。

如果用useCallback来包裹onClick,确实可以避免不相关的item渲染,但是如果item是作为一个对外提供的组件,并不能保证开发者有使用useCallback的意识

问:这种情况我该如何优化我的组件设计呢

 

这是react埋的坑,它埋的坑多的数不胜数,有的时候真觉得垃圾。

React组件重建vdom取决于两个因素 props和state。你这种情况是说,props接收不受你控制,其他人也不管性能问题,胡写瞎写。说来说去,都是react官方埋的坑。

针对你上述具体问题,你可以在你的组件外面套一个React.memo,它有第二个参数,用来决定你传入的props是否变化,具体用法看官方文档。判断的时候,你直接忽略onClick,因为大部分场景下回调函数都不会发生变化,谁会设计根据一个回调函数来重新渲染界面呢?除非要把函数的字符串显示在界面上……这种场景没见过。

基于这个想法,我们还可以基于React.memo封装一个高阶函数,所有函数组件都用这个高阶函数包装。再定个规矩,所有以on开头的回调函数传给组件,只接收一次,后续你换个函数给我我都不理会,也不会重新触发渲染。在高阶函数里面实现这个逻辑。



作者:否子戈
链接:https://www.zhihu.com/question/442368205/answer/1711027669
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文摘自 :https://www.cnblogs.com/


更多科技新闻 ......