React 开发者工具 – React 中文文档React搜索⌘CtrlK教程参考社区博客起步快速入门 教程：井字棋游戏 React 哲学 安装 启动一个新的 React 项目 将 React 添加到已有项目中 编辑器配置 使用 TypeScript React 开发者工具 学习 React描述 UI 第一个组件 组件的导入与导出 使用 JSX 书写标签语言 在 JSX 中通过大括号使用 JavaScript 将 Props 传递给组件 条件渲染 渲染列表 保持组件纯粹 Your UI as a Tree 添加交互 响应事件 state：组件的记忆 渲染和提交 state 如同一张快照 把一系列 state 更新加入队列 更新 state 中的对象 更新 state 中的数组 状态管理 用 State 响应输入 选择 State 结构 在组件间共享状态 对 state 进行保留和重置 迁移状态逻辑至 Reducer 中 使用 Context 深层传递参数 使用 Reducer 和 Context 拓展你的应用 应急方案 使用 ref 引用值 使用 ref 操作 DOM 使用 Effect 同步 你可能不需要 Effect 响应式 Effect 的生命周期 将事件从 Effect 中分开 移除 Effect 依赖 使用自定义 Hook 复用逻辑 这个页面对你有帮助吗？学习 React安装React 开发者工具使用 React 开发者工具检查 React components，编辑 props 和 state，并识别性能问题。
你将会学习到
如何安装 React 开发者工具
浏览器扩展
调试 React 构建的网站最简单的办法就是安装 React 开发者工具浏览器扩展。它可用于几种流行的浏览器：
安装 Chrome 扩展
安装 Firefox 扩展
安装 Edge 扩展
现在，如果你访问一个用 React 构建 的网站，你将看到 Components 和 Profiler 面板。
Safari 和其他浏览器
为其他浏览器（比如，Safari），安装 react-devtools npm 包:
# Yarnyarn global add react-devtools# Npmnpm install -g react-devtools
接下来从终端打开开发者工具：
react-devtools
然后通过将以下 <script> 标签添加到你网站的 <head> 开头来连接你的网站：
<html> <head> <script src="http://localhost:8097"></script>
现在在浏览器里刷新你的网站，你可以在开发者工具里查看它。
移动端（React Native）
React 开发者工具同样可检查用 React Native 构建的应用程序。
使用 React 开发者工具最简单的办法就是全局安装它：
# Yarnyarn global add react-devtools# Npmnpm install -g react-devtools
接下来从终端打开开发者工具：
react-devtools
它应该可以连接到任何正在运行的本地 React Native 应用程序。
如果几秒钟后开发者工具未连接，请尝试重新加载应用程序。
了解有关调试 React Native 的更多信息。上一页使用 TypeScript你觉得这些文档怎么样？参与我们的调查吧！©2023学习 React快速入门安装描述 UI添加交互状态管理逃脱方案API 参考React APIReact DOM API社区行为准则团队文档贡献者鸣谢了解更多博客React Native隐私政策条款On this pageOverview浏览器扩展 Safari 和其他浏览器 移动端（React Native）