React Native（TS+MobX）应用性能检测及StyleSheet性能验证方法咨询

Hey there! Let's walk through how to verify those StyleSheet claims and check your React Native app's performance properly.

验证 StyleSheet.create vs 普通对象的内存与引用行为 #

First, let's confirm whether the two style approaches behave differently in terms of references and memory:

1. 代码层面的引用相等性测试 #

You can build a simple test component to log reference changes across re-renders. This will show you if the style objects are reused or recreated each time your component renders:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const StyleTestComponent = () => {
  const [count, setCount] = useState(0);

  // StyleSheet.create 写法
  const styledStyles = StyleSheet.create({
    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    text: { color: 'red' },
  });

  // 普通对象写法
  const plainStyles = {
    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    text: { color: 'red' },
  };

  // 每次渲染时打印引用
  console.log('styledStyles.container 引用:', styledStyles.container);
  console.log('plainStyles.container 引用:', plainStyles.container);
  console.log('引用是否相等?', styledStyles.container === plainStyles.container);

  return (
    <View style={styledStyles.container}>
      <Text style={styledStyles.text} onPress={() => setCount(prev => prev + 1)}>
        点击触发重渲染 ({count})
      </Text>
    </View>
  );
};

export default StyleTestComponent;

点击文本触发重渲染后，查看调试控制台：

• styledStyles.container 的引用在每次渲染时都会保持一致（StyleSheet 会缓存这些对象）
• plainStyles.container 的引用每次渲染都会变化（每次都会创建新的对象）

虽然 React Native 会对值相同的新样式对象做优化，但引用变化可能会触发 React 调和过程中不必要的差异检查。

2. 用 React Native DevTools 做堆快照分析 #

想要更深入验证内存行为：

1. 打开 React Native 开发者菜单（摇设备，或 Android 按 Ctrl+M、iOS 按 Cmd+D）
2. 选择 Show Inspector 并切换到 Memory 标签
3. 触发几次组件重渲染
4. 拍摄堆快照，然后搜索你的样式对象
   • 使用 StyleSheet.create 的话，每个样式对象只会有一个实例
   • 使用普通对象的话，会看到多个实例（每次渲染创建一个）

检测应用整体性能 #

这里有一些实用的工具和方法来审计你的应用性能：

1. 内置性能监视器 #

获取实时性能指标的最简单方法：

1. 打开开发者菜单，选择 Show Perf Monitor
2. 重点关注：
   • JS FPS：应该保持在 60 左右，下降说明 JS 线程有阻塞操作
   • UI FPS：反映原生 UI 线程的性能
   • 内存使用：追踪 JS 堆和原生内存的消耗情况

2. React DevTools 性能分析器 #

针对组件级别的渲染分析：

1. 通过 npm/yarn 安装 react-devtools：npm install -g react-devtools
2. 运行 react-devtools 并连接你的应用
3. 切换到 Profiler 标签，录制一段应用交互的会话，然后：
   • 找出不必要的重渲染组件（比如因样式引用变化触发的）
   • 定位渲染时间过长、拖慢应用的组件

3. 内存泄漏检测 #

用堆快照查找内存泄漏：

1. 应用处于初始干净状态时，拍摄第一个堆快照
2. 执行一轮操作（比如打开一个页面，然后关闭）
3. 拍摄第二个快照并对比两者
4. 寻找那些本应被垃圾回收但仍存在于第二个快照中的对象/组件

4. Flipper 调试工具 #

Flipper 是 React Native 官方推荐的调试平台，拥有强大的性能工具：

• Performance Monitor：详细的 FPS、JS 线程阻塞、原生事件时间线
• Heap Explorer：可视化应用堆内存，追踪引用链，精准定位泄漏点
• Layout Inspector：审计 UI 层级，移除拖慢渲染的冗余视图

额外提示：为什么 StyleSheet.create 依然值得用 #

即使内存差异很小，StyleSheet.create 还有额外优势：

• 类型安全（对 TypeScript 尤其有用，会验证样式属性）
• 提前验证样式值（在构建阶段就捕获无效属性）
• 针对原生样式处理的底层优化（将样式转换为原生组件更快处理的格式）

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