【React】React常用开发工具

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、React DevTools
  • 二、Redux DevTools
  • 三、Create React App


前言

React 是一种用于构建用户界面的流行 JavaScript 库,由于其灵活性、性能和可重用性,已在 Web 开发人员中得到广泛采用。

使用React 开发工具,它们可以帮助您构建更好、更快、更高效的 React 应用程序。


提示:以下是本篇文章正文内容,下面案例可供参考

一、React DevTools

可以在chrome浏览器扩展程序中下载,或者是下载网上的压缩包
在这里插入图片描述
在这里插入图片描述

You will get two new tabs in your Chrome DevTools: “⚛️ Components” and “⚛️ Profiler”.

React DevTools 的主要功能

  1. 组件树视图:您可以可视化 React 组件的层次结构。您可以检查每个组件的道具和状态,查看组件的渲染输出,甚至实时修改道具和状态以查看它如何影响组件的行为。
  2. 道具和状态检查:您将获得有关每个组件的道具和状态的详细信息,从而可以轻松检查流经您的 React 应用程序的数据。您可以查看 props 和 state 的值,跟踪随时间的变化,甚至查看组件的更新历史记录。
  3. 时间旅行调试器:您可以选择在组件的生命周期中进行时间旅行,从而轻松了解组件的 props 和状态如何随时间变化。您可以通过组件的更新来回前进,检查每个时间点的道具和状态,甚至恢复到以前的状态以重现和修复错误。
  4. 性能分析: React DevTools 包含一个内置分析器,可帮助您识别 React 应用程序中的性能瓶颈。您可以分析组件的渲染性能,查看每次更新所花费的时间,并分析组件的更新模式以优化性能并减少不必要的渲染。
  5. 突出显示更新:您可以有效地突出显示经常更新的组件,从而轻松识别可能导致不必要渲染的组件。您可以查看哪些组件正在更新以及更新频率,帮助您识别性能问题并优化您的 React 应用程序
  6. 过滤和搜索: React DevTools 提供了强大的过滤和搜索功能,让您可以快速查找和检查 React 应用程序中的特定组件或 DOM 元素。您可以按名称、类型或更新状态过滤组件,甚至可以根据其属性或状态值搜索组件。
  7. 多个 React 版本:此 React 工具支持多个 React 版本,使其与可能使用不同 React 版本的不同项目兼容。你可以在 DevTools 设置中切换不同的 React 版本,允许你检查和调试具有不同依赖项的 React 应用程序。
  8. 可访问性检查: React DevTools 包含可访问性检查功能,可帮助您识别和修复 React 组件中的可访问性问题。您可以检查可访问性违规、查看可访问性属性,并获得改进 React 应用程序可访问性的建议,确保所有用户都可以访问您的 UI。

二、Redux DevTools

在这里插入图片描述
如果您正在使用 Redux,一个流行的 React 状态管理库,Redux DevTools 是一个必备工具。

它提供了一组用于检查和调试 Redux 存储的强大功能,包括操作、状态更改和中间件。

Redux DevTools 还提供高级功能,如时间旅行调试器,它允许您逐步浏览 Redux 存储和重放操作的历史记录,从而更容易理解和解决复杂的状态管理逻辑。

三、Create React App

在这里插入图片描述

	npx create-react-app react-democd react-demo npm start

Create React App 是一种流行的命令行工具,可让您使用预配置的开发环境快速引导新的 React 项目。

它设置了一个简约但功能强大的开发设置,具有现代功能,例如热模块替换,允许您在不刷新页面的情况下查看代码中的更改,以及具有自动错误报告的内置开发服务器。

Create React App 还附带了一组用于常见开发任务的内置脚本,例如构建和部署您的 React 应用程序,使其成为 React 开发入门的绝佳工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/485374.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++知识整理day4内存管理——new和delete详解

文章目录 1.C/C内存分布2.C语言中动态内存管理:malloc/realloc/calloc3.C内存管理方式3.1 new/delete操作内置类型3.2 new和delete操作自定义类型 4.malloc/free和new/delete到底什么区别?4.1 对于自定义类型4.2 对于自定义类型4.3 总结:它们…

flex: 1 display:flex 导致的宽度失效问题

flex: 1 & display:flex 导致的宽度失效问题 问题复现 有这样的一个业务场景,详情项每行三项分别占33%宽度,每项有label字数不固定所以宽度不固定,还有content 占满标签剩余宽度,文字过多显示省略号, 鼠标划入展示…

大数据技术Kafka详解 ② | Kafka基础与架构介绍

目录 1、kafka的基本介绍 2、kafka的好处 3、分布式发布与订阅系统 4、kafka的主要应用场景 4.1、指标分析 4.2、日志聚合解决方法 4.3、流式处理 5、kafka架构 6、kafka主要组件 6.1、producer(生产者) 6.2、topic(主题) 6.3、partition(分区) 6.4、consumer(消费…

极限激光雷达点云数据集

https://arxiv.org/pdf/2307.07607v5 ‎ - AirLab 他们的数据集里面有这么多极限场景 点云数据转换 他们的激光用的velodyne,录制的格式是【velodyne_msgs/VelodyneScan】 需要把【velodyne_msgs/VelodyneScan】转化成【sensor_msgs/PointCloud2】 我编译https://github.co…

电子应用设计方案-43:智能手机充电器系统方案设计

智能手机充电器系统方案设计 一、引言 随着智能手机的广泛应用,对充电器的性能、效率和安全性提出了更高的要求。本方案旨在设计一款高效、安全、兼容多种快充协议的智能手机充电器。 二、系统概述 1. 系统目标 - 提供快速、稳定、安全的充电功能。 - 兼容主流的智…

jenkins 插件的安装

一、本地下载解压安装 宿主机的下载官网或者国内访问地址清华源:配置环境变量 vim /etc/profileexport MAVEN_HOM/maven_pathexort PATH$PATH:$MAVEN_HOM/binsource /etc/profilemvn -v二、jenkins 插件的安装 -Dashboard》系统管理》插件管理 三、设置国内源 …

python中的列表、元组、字典的介绍与使用

目录 一、区别介绍 1.使用场景以及区别图 2.详细介绍 列表 元组 字典 二、例子操作 (一)列表list 1.定义和初始化 2.访问元素(下标) 3.修改元素(下标) 4.添加元素(append、下标insert) 5.删除…

Spring框架-IoC的使用(基于XML和注解两种方式)

一、Spring IoC使用-基于XML 1 IoC使用-基于XML 使用SpringIoC组件创建并管理对象 1.1 创建实体类 package com.feng.ioc.bean;import java.util.Date;/*** program: spring-ioc-demo1* description: 学生实体类* author: FF* create: 2024-12-04 18:53**/ public class Stud…

AndroidStudio-常见界面控件

一、Button package com.example.review01import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.TextViewclass Review01Activity : AppCompatActivity() {override fun onCreate(savedInstanceStat…

汽车IVI中控开发入门及进阶(三十六):QML调用蓝牙sdk的架构

Qt/QML本身在做GUI界面工程时,除了各种界面上的按钮、图片、工具条等元素之外,最方便的就是可以通过C++实现界面各种复杂逻辑,而实现上不可避免就需要一些外部库的支持,不管是静态库.a还是动态库.so,比如蓝牙模块。 而QML/C++启动一个蓝牙协议栈SDK作为一个进程,然后启动…

即时通信系统项目总览

聊天室服务端项目总体介绍 本项目是一个全栈的即时通信系统, 前端使用QT实现聊天客户端, 后端采⽤微服务框架设计, 由网关子服务统一接收客户端的请求, 再分发到不同的子服务上处理并将结果返回给网关, 网关再将响应转发给客户端 拆分的微服务包含: 网关服务器&…

TDesign:Radio 单选框

Radio 单选框文档地址 view TDRadioGroup(onRadioGroupChange: (String? selectedId){controller.onTapSelectId(selectedId!);},contentDirection: TDContentDirection.left,selectId: 1,child: <Widget>[TDRadio(id: 1,selectColor:const Color(0xffFF770F),showDivi…

【已解决】windows下安装Git

文章目录 1. 下载Git2. 安装3. 测试安装是否成功 1. 下载Git https://git-scm.com/downloads/win 进入到官网后如下如图&#xff0c;并选择自己需要的版本&#xff0c;点击即可下载 2. 安装 2.1 下载完成后双击打开&#xff0c;点击Next 2.2 选择安装路径 2.3 选择必要组件…

策略模式实战 - 鸭展

该示例出自著名的《HeadFirst》系列的《HeadFirst设计模式》图书的第一个设计模式。用一个鸭子展览的小应用&#xff0c;一步步揭示了如何引入和使用策略模式将示例改造的完美一些。 文章目录 红头鸭与绿头鸭橡皮鸭和诱饵鸭用接口代替继承组合关系与策略模式 红头鸭与绿头鸭 当…

Leetcode—367. 有效的完全平方数【简单】

2024每日刷题&#xff08;208&#xff09; Leetcode—367. 有效的完全平方数 C实现代码 class Solution { public:bool isPerfectSquare(int num) {for(long long i 1; i < num / 2 1; i) {if(i * i num) {return true;}}return false;} };运行结果 二分法实现代码 cl…

【大语言模型】LangChain LCEL 表达式语言

【大语言模型】LangChain LCEL 表达式语言 一、简介二、LCEL的优势三、LCEL 的基本使用1、Runnable 对象 四、实战实例 一、简介 LangChain LCEL 的全称为 LangChain Expression Language 即可直译为 LangChain 表达式。 为了构造更复杂的 LLM 应用并且更为简便快捷的构造 LLM…

【深入探索 C++ STL 双端队列 】deque —— 数据时空的双端虫洞,扭曲常规操作的效率边界

STL系列专栏&#xff1a; C STL系列__Zwy的博客-CSDN博客https://blog.csdn.net/bite_zwy/category_12838593.html?spm1001.2014.3001.5482学习C STL的三个境界&#xff0c;会用&#xff0c;明理&#xff0c;能扩展&#xff0c;STL中的所有容器都遵循这个规律&#xff0c;下面…

AcWing 717. 简单斐波那契

文章目录 前言代码思路 前言 今天练习了半个小时的打字&#xff0c;还有点想继续练习&#xff0c;但是感觉还是不练了比较好。 简单题可能快要写完了&#xff0c;自己因为要做个手术回家几天&#xff0c;不想带电脑回去&#xff0c;好几天不能练习打字&#xff0c;要不今天再…

FPGA系列,文章目录

前言 FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;是一种集成电路&#xff0c;其内部结构可以通过软件重新配置来实现不同的逻辑功能。与传统的ASIC&#xff08;Application-Specific Integrated Circuit&#xff0c;专用集成电路…

【Linux】软硬连接 | 静动态库

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 你说得对&#xff0c…