react组件进阶 之代码性能工具的使用

简介: 在严格模式下,虽然不能监控到具体的副作用代码,但它会将不能具有副作用的函数调用两遍,以便发现问题。(这种情况,仅在开发模式下有效)

工具


这里所说的工具是指我们在书写react代码中,来帮我们检查代码是否规范,并且符合标准的工具


严格模式


StrictMode(React.StrictMode),本质是一个组件,该组件不进行UI渲染,它的作用是,在渲染内部组件时,发现不合适的代码。


  • 识别不安全的生命周期
  • 关于使用过时字符串 ref API 的警告
  • 关于使用废弃的 findDOMNode 方法的警告
  • 检测意外的副作用

。React要求,副作用代码仅出现在以下生命周期函数中

1.ComponentDidMount

2.ComponentDidUpdate

3.ComponentWillUnMount


副作用:一个函数中,做了一些会影响函数外部数据的事情,例如:


1.异步处理

2.改变参数值

3.setState

4.本地存储

5.改变函数外部的变量


相反的,如果一个函数没有副作用,则可以认为该函数是一个纯函数


在严格模式下,虽然不能监控到具体的副作用代码,但它会将不能具有副作用的函数调用两遍,以便发现问题。(这种情况,仅在开发模式下有效)


  • 检测过时的 context API


Profiler 性能分析工具


分析某一次或多次提交(更新),涉及到的组件的渲染时间


火焰图:得到某一次提交,每个组件总的渲染时间以及自身的渲染时间


20210330155833848.png


排序图:得到某一次提交,每个组件自身渲染时间的排序


20210330155848548.png


组件图:某一个组件,在多次提交中,自身渲染花费的时间

相关文章
|
8月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
276 67
|
资源调度 前端开发 Android开发
如何在 React Native 中进行代码签名验证?
如何在 React Native 中进行代码签名验证?
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
678 158
|
11月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
1693 1
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
730 58
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
666 10
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
212 1
|
JSON 前端开发 JavaScript
【简单粗暴】如何使用 React 优化 AG 网格性能
【简单粗暴】如何使用 React 优化 AG 网格性能
365 3