欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 幼教 > React (三)

React (三)

2025/5/3 16:39:39 来源:https://blog.csdn.net/weixin_42067536/article/details/143959563  浏览:    关键词:React (三)

文章目录

  • 项目地址
  • 十二、性能优化
    • 12.1 使用useMemo避免不必要的计算
    • 12.2 使用memo缓存组件,防止过度渲染
    • 12.3 useCallBack缓存函数
    • 12.4 useCallBack里访问之前的状态(没懂)
  • 十三、Styled-Components
    • 13.1 安装
    • 13.2给普通html元素添加样式
    • 13.3 继承和覆盖样式
    • 13.4 给react组件添加样式
    • 13.5 使用props控制样式
    • 13.6 使用嵌套样式
    • 13.7 定义主题
    • 13.8 实现样式的多态
  • 十四、使用React Transition Group实现动画(跳过)


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

十二、性能优化

12.1 使用useMemo避免不必要的计算

只有在指定的数值发生了变化,才会执行

  • 当页面发生变化时,因为react的机制,会导致页面进行一次刷新,但是由于购物车或者其他计算功能并没有更改,所以不应该重新计算;
  • 参数1:接受一个回调函数,返回我们需要计算的值
  • 参数2:和useEffect一样,接受一个依赖数组,把变化的东西放进去,来触发useMemo

在这里插入图片描述

12.2 使用memo缓存组件,防止过度渲染

只有props发生了变化,才会重新渲染组件

  • 虽然,上面计算没有重新渲染,但是商品列表没有变化(添加或者删除)商品ÿ

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词