使用 Flipper 与 React DevTools 进行性能分析
将 Flipper 连接到运行中的应用，使用 React DevTools 插件检查组件树，记录渲染跟踪，并找出不必要地重新渲染的组件。
使用 Flipper 与 React DevTools 进行性能分析 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Performance Profiling Matters
React Native apps can suffer from dropped frames, slow list scrolling, long startup times, and excessive memory use — all of which frustrate users. Before optimizing, you must measure to understand where the bottleneck actually is, rather than guessing and making speculative changes.
The two primary profiling tools for React Native are Flipper (a native debugging platform) and React DevTools (which includes a component profiler). Used together, they give you visibility into both the JS thread performance and the component render tree.
Setting Up Flipper
Flipper is a desktop application by Meta that connects to running React Native apps over USB or a network and displays real-time debugging data. Download it from fbflipper.com and install it on your development machine.
Flipper works out of the box with React Native CLI projects on physical devices and simulators. For Expo apps, you need to use a development build (not Expo Go). Once connected, Flipper's sidebar shows available plugins including React DevTools, Network Inspector, Hermes Debugger, and Layout Inspector.
The React DevTools Plugin
The React DevTools plugin in Flipper lets you inspect the component tree in real time. You can select any component to see its current props, state, and hooks values in the right panel. This is invaluable for debugging why a component is rendering with unexpected values.
You can also use the standalone react-devtools package: install it globally with npm install -g react-devtools, then run react-devtools and shake your device to open the developer menu and connect.
# Install standalone React DevTools
npm install -g react-devtools
# Start the DevTools server
react-devtools
# In your app, shake the device and tap 'Open Debugger'
# OR in the Metro bundler terminal, press 'd' to open the dev menuThe React Profiler: Recording Renders
Inside React DevTools, the Profiler tab records which components rendered and how long each render took. Click Record, interact with the app (scroll a list, type in a field, tap a button), then click Stop. The flame graph shows each render, color-coded from yellow (slow) to blue (fast).
Each bar in the flame graph represents a component re-render. Taller bars indicate more time spent rendering. Clicking a bar shows the render duration in milliseconds and which props or hooks changed to trigger the re-render.
Identifying Unnecessary Re-Renders
A common performance issue is components that re-render when their props or state have not actually changed. In the React Profiler, look for components that appear in every flame graph frame even when the user is not interacting with them — these are candidates for memoization.
You can also enable the Highlight updates option in React DevTools. Every time a component re-renders, it flashes with a colored border on the screen. Green means a fast render, yellow means slow. Seeing the entire screen flash on a single button press is a sign of excessive re-renders.
The Layout Inspector and Network Tab
Flipper's Layout Inspector shows the native view hierarchy, similar to the iOS View Debugger or Android Layout Inspector. You can tap any element in the inspector to highlight it on the device and inspect its native layout properties.
The Network Inspector shows all HTTP requests made by the app, including headers, body, and response. This is useful for catching redundant API calls, unexpected slow endpoints, or misconfigured caching headers that cause data to be re-fetched unnecessarily.
Hermes and JS Thread Performance
React Native uses Hermes, a JavaScript engine optimized for mobile, as the default engine since React Native 0.70. Hermes pre-compiles JavaScript to bytecode at build time, dramatically reducing startup time. Flipper's Hermes Debugger lets you profile CPU usage and inspect memory allocations in the JS heap.
To profile JS thread performance, use the Hermes Debugger's Timeline tab. Record a session, then look for long JavaScript tasks that block the UI thread. Tasks longer than 16ms cause dropped frames (below 60fps).
Measuring FPS with Performance Monitor
The React Native built-in Performance Monitor (accessible from the developer menu) shows real-time frames per second. Two FPS counters are displayed: the JS FPS (how fast JavaScript executes) and the UI FPS (how fast frames are rendered natively).
The target is 60 FPS for both. If JS FPS drops but UI FPS stays high, the bottleneck is JavaScript logic. If UI FPS drops while JS FPS is high, the bottleneck is in the native rendering layer — often caused by too many Views or complex shadows.
Using console.time for Microbenchmarks
For quick measurements of specific operations — like how long it takes to process an API response or filter a large array — use console.time and console.timeEnd. These are available in Hermes and work in the Metro/Flipper console.
This is useful for identifying expensive data transformations that could be moved off the JS thread, memoized, or simplified before rendering a list.
// Measure array sorting performance
console.time('sortPosts');
const sorted = posts.sort((a, b) => b.createdAt - a.createdAt);
console.timeEnd('sortPosts'); // e.g., 'sortPosts: 3.14ms'
// Measure a network call
console.time('fetchUser');
const user = await fetchUserById(userId);
console.timeEnd('fetchUser'); // e.g., 'fetchUser: 245ms'Why You Measure Before You Optimize
A common mistake is to apply memoization (React.memo, useCallback, useMemo) everywhere as a precaution. This actually adds cost — memoization runs comparison functions on every render, and for simple components the comparison may cost more than just re-rendering.
The rule is: profile first, then optimize where the profiler shows a real bottleneck. The React Profiler's Why did this render? panel tells you the exact props or hooks that changed for each component, so you know precisely what to memoize.
Performance Monitoring in Production
Development profiling with Flipper only shows performance on your machine. For production insights, integrate a performance monitoring tool like Firebase Performance Monitoring or Sentry Performance. These capture real user metrics including app startup time, screen render duration, and HTTP request latency.
Use perf().startTrace('my-operation') from Firebase Performance to instrument specific flows and see timing data broken down by country, device, and app version in the Firebase console.
import perf from '@react-native-firebase/perf';
async function loadFeed() {
const trace = await perf().startTrace('load_feed');
try {
const data = await fetchFeedData();
setFeed(data);
trace.putMetric('item_count', data.length);
} finally {
await trace.stop(); // Records duration to Firebase
}
}Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
In this lesson you learned: how to use Flipper and the React DevTools Profiler to record component renders, how to identify unnecessary re-renders using the Highlight Updates overlay, and why you should always measure with profiling tools before applying optimizations. Next up we apply memoization techniques with React.memo, useCallback, and useMemo to eliminate the bottlenecks we discovered.
常见问题解答
「使用 Flipper 与 React DevTools 进行性能分析」课时是免费的吗？
是的 — 「使用 Flipper 与 React DevTools 进行性能分析」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。
「使用 Flipper 与 React DevTools 进行性能分析」这节课中我会学到什么？
将 Flipper 连接到运行中的应用，使用 React DevTools 插件检查组件树，记录渲染跟踪，并找出不必要地重新渲染的组件。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Native Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「使用 Flipper 与 React DevTools 进行性能分析」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Native Academy 课中编写并运行代码吗？
能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 Flipper 与 React DevTools 进行性能分析
- 使用 React.memo、useCallback 与 useMemo 进行记忆化
- FlatList 性能调优
- 包体积与延迟加载