【React】React常用开发工具

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

文章目录

前言
[一、React DevTools](#一、React DevTools)
[二、Redux DevTools](#二、Redux DevTools)
[三、Create React App](#三、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 的主要功能

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

二、Redux DevTools

如果您正在使用 Redux，一个流行的 React 状态管理库，Redux DevTools 是一个必备工具。

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

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

三、Create React App

复制代码

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

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

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

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