用React写函数组件，如何避免重复渲染？

用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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。