AI 助理
备案控制台
开发者社区 云计算 文章 正文

React-59：PureComponent

2021-11-15 166
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React-59：PureComponent

React中的component存在两个问题

  • 只要执行setState()，即使不改变状态数据，组件也会重新render()
  • 当前组件重新render()，就会自动重新render子组件，如果子组件并没有用到父组件的任何东西，这样就会使得效率低。

造成上述问题的原因

  • shouldComponentUpdate()总是返回true

效率高的做法

  • 只有当组件的state或props数据发生改变时才重新render

解决问题的方法

  1. 通过手动判断shouldComponentUpdate来决定是否render

image.png

关键词：
React Native purecomponent
react.js PureComponent
答案命运
目录
相关文章
土木林森
|
前端开发 UED 开发者
React组件优化全攻略：深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时，性能是提升用户体验的关键因素。React作为主流前端库，其组件优化尤为重要。本文深入探讨了React组件优化策略，包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法，帮助开发者显著提升应用性能。通过实践案例对比优化前后效果，不仅提高了页面渲染速度，还增强了用户体验。优化React组件是每个开发者必须关注的重点。
土木林森
261 0
wljslmz
|
前端开发 开发者
深入理解React PureComponent的使用时机与优势
【8月更文挑战第24天】
wljslmz
345 0
&ACE&
|
前端开发
React Component和Purecomponent区别
React Component和Purecomponent区别
&ACE&
183 0
游客ruqdfvh2iuyqc
|
前端开发
react 组件进阶之 pureComponent(纯组件)
react 组件进阶之 pureComponent(纯组件)
游客ruqdfvh2iuyqc
339 0
react 组件进阶之 pureComponent(纯组件)
答案命运
|
前端开发
React之PureComponent的用法
React之PureComponent的用法
答案命运
173 0
code_xzh
|
前端开发 JavaScript
React Native之组件Component与PureComponent
code_xzh
3218 0
答神~
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
答神~
815 0
答神~
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
答神~
220 0
答神~
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
答神~
226 0
恬0917
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库，嵌套路由
React 的antd-mobile 组件库，嵌套路由
恬0917
459 0

热门文章

最新文章

  • 1
    React的路径别名
  • 2
    react hooks 使用小技巧—useState传值函数
  • 3
    部署React项目到云服务器(步骤清晰)
  • 4
    React 还是 Vue: 你应该选择哪一个Web前端框架？
  • 5
    React(0.13) 定义一个动态的组件(注释，样式)
  • 6
    Electron搭配React的history路由模式打包exe客户端
  • 7
    将 React 应用迁移至 Vite
  • 8
    Zustand：更强大的 React 状态管理库
  • 9
    React 官方发布 V16.6.0，新增支持 lazy，memo 和 contextType
  • 10
    好程序员Web前端教程之React原理解析及优化技巧
  • 1
    React 19 Actions：表单处理从未如此优雅
    344
  • 2
    React 18 流式渲染：解锁极致性能优化实践
    473
  • 3
    深入浅出React中的refs
    200
  • 4
    【CodeBuddy】挑战一句话开发一个完整项目之：React表单验证系统
    215
  • 5
    如何使用组合组件和高阶组件实现复杂的 React 应用程序？
    297
  • 6
    在 React 中，组合组件和高阶组件在性能方面有何区别？
    268
  • 7
    除了高阶组件和render props，还有哪些在 React 中实现代码复用的方法？
    321
  • 8
    掌握Multi-Agent实践(三)：ReAct Agent集成Bing和Google搜索功能，采用推理与执行交替策略，增强处理复杂任务能力
    532
  • 9
    使用 Node.js、Express 和 React 构建强大的 API
    354
  • 10
    Vue与React两大前端框架的主要差异点
    509

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    基于Python+Vue开发的口腔牙科预约管理系统