React Native 新架构：Fabric、JSI 与性能优化

React Native 的新架构消除了自诞生以来一直困扰性能的异步桥接瓶颈。

旧桥接 vs 新架构

旧：JS → 异步 JSON 桥接 → Native（每次调用都成为瓶颈） 新：JSI（直接 C++ 调用）+ Fabric（同步布局）+ TurboModules（懒加载）

// 新：TurboModule — 需要时同步
import { TurboModuleRegistry } from 'react-native'
const BiometricModule = TurboModuleRegistry.getEnforcing('BiometricModule')
const isAvailable = BiometricModule.isAvailableSync()  // 无需回调！

Reanimated 3：UI 线程上的动画

import Animated, {
  useSharedValue, useAnimatedStyle, withSpring,
  withTiming, runOnJS, useDerivedValue, interpolate, Extrapolation
} from 'react-native-reanimated'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'

function SwipeableCard({ onDismiss }) {
  const translateX = useSharedValue(0)
  const SCREEN_WIDTH = Dimensions.get('window').width

  const panGesture = Gesture.Pan()
    .onUpdate((e) => { translateX.value = e.translationX })
    .onEnd((e) => {
      const shouldDismiss = Math.abs(e.translationX) > SCREEN_WIDTH * 0.4
      if (shouldDismiss) {
        translateX.value = withTiming(
          Math.sign(e.translationX) * SCREEN_WIDTH * 1.5, {},
          () => runOnJS(onDismiss)()
        )
      } else {
        translateX.value = withSpring(0)
      }
    })

  const rotation = useDerivedValue(() =>
    interpolate(translateX.value, [-SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2],
      [-15, 0, 15], Extrapolation.CLAMP)
  )

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }, { rotate: `${rotation.value}deg` }]
  }))

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.card, style]}>
        <CardContent />
      </Animated.View>
    </GestureDetector>
  )
}

FlashList vs FlatList

FlatList 组件回收效率低下。FlashList（Shopify）是直接替代品。

import { FlashList } from '@shopify/flash-list'

function ProductList({ products, onLoadMore }) {
  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <ProductCard product={item} />}
      keyExtractor={(item) => item.id}
      estimatedItemSize={120}   // 关键：预估项目高度
      drawDistance={500}         // 预渲染视口外 500px
      onEndReachedThreshold={0.5}
      onEndReached={onLoadMore}
    />
  )
}

分解长任务

async function processLargeDataset(items) {
  const results = []
  const CHUNK_SIZE = 50

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    results.push(...processChunk(items.slice(i, i + CHUNK_SIZE)))
    await new Promise(resolve => setImmediate(resolve))  // 让出 UI 线程
  }
  return results
}

Metro 打包优化

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: { inlineRequires: true },  // 延迟模块加载
    }),
  },
}

新架构是新的 React Native 项目的默认配置。Reanimated 3 + FlashList 是对现有应用影响最大的升级。

→ 使用 URL 解析器 工具解析你的深度链接 URL。