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


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

相关文章
|
1月前
|
JavaScript 前端开发 API
详解React与Vue的性能对比
详解React与Vue的性能对比
88 0
|
2月前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
8天前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
16天前
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。
|
18天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
19天前
|
前端开发 数据可视化 UED
React的代码分割:使用React.lazy和Suspense进行性能优化
【4月更文挑战第25天】使用React的`React.lazy`和`Suspense`进行代码分割可优化性能,按需加载组件以提升应用启动速度和用户体验。`React.lazy`接收返回Promise的组件动态导入,而`Suspense`提供加载指示器,保证加载过程中的用户体验。适用于大型组件或路由应用,但需注意服务器配置、避免过度拆分和确保关键代码即时加载。合理运用能显著改善应用性能。
|
1月前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
1月前
|
存储 JavaScript 前端开发
React中的Redux:简介和实例代码
React中的Redux:简介和实例代码
24 1
|
2月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
|
3月前
|
JavaScript 前端开发 算法
React与Vue性能对比
React与Vue性能对比