问答

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

作者:admin 2021-05-05 我要评论

场景: 有一个自定义的item组件, 它的onClick方法是父组件透传的。父组件中含有大量的item。 当父组件更新时,onClick会被重新创建,由于函数跟常量不一样,是...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

问题:

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

###

子组件只要确保传入的参数相同不触发重复渲染就可以了,也就是使用 memo 进行缓存。至于开发者怎么使用你也管不到人家呀...

###

大部分情况下我们确实不需要关心性能问题,这也是为啥“开发者没有使用useCallback的意识”。作为item组件的开发者也没必要过早的优化item组件,如果组件使用方遇到了性能问题,他可以自己选择优化方案,比如使用React.memouseCallback等。把选择权交给组件使用方更好些。

###

Item组件的onClick导致它重复渲染,这是开发者自己的事情,性能优化要有一个合理的边界,没必要为开发者的行为负责。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 用React写函数组件,如何避免重复渲染

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

  • js 树形结构根据条件push新数组

    js 树形结构根据条件push新数组

  • 请问echarts的环图如何在中心显示固定

    请问echarts的环图如何在中心显示固定

  • 请问如何练习才能提高程序能力呢?

    请问如何练习才能提高程序能力呢?

腾讯云代理商
海外云服务器