React Native Perf Monitor中Views列含义及拆分原因的技术问询

Great question—this is a common point of confusion since the official docs don’t spell out this detail as clearly as we’d like! Let’s break down your two questions:

1. What does the "Views" column represent? #

First off: the "Views" metric here counts native platform view instances, not your React components.

React Native works by translating your React components into native UI elements under the hood—for example, a <Text> component becomes a UILabel on iOS or a TextView on Android. Some more complex React components (like custom ones built with multiple native elements) might even map to several native views at once. This column tracks how many of those underlying native view objects are currently mounted and part of your app’s view hierarchy.

2. Why is the "Views" column split into two parts? #

The split shows two critical values side by side:

• The left number is the current active count: how many native views are in your app’s view hierarchy right now.
• The right number is the peak count: the highest number of native views that were rendered at any point since you launched the app (or since you reset the Perf Monitor tool).

This split is really handy because it lets you quickly spot issues like memory leaks (where views aren’t properly unmounted, leading to a steadily increasing peak count) or performance hogs (like screens that trigger a huge spike in view creation when loaded).

内容的提问来源于stack exchange，提问作者Songwon Park