我为什么开始在 React Native 中封装所有内容？

Source: Dev.to

🚀 我已经使用 React Native 大约 4 年了，有一点我是通过惨痛的教训学到的：

• 没有什么是永久不变的。
• 库会被废弃。
• 最佳实践会改变。
• 去年“推荐”的东西今天突然感觉不对了。

有一次，我开始自问：

我为什么要一次又一次地修复同一个问题，只因为库变了？ 🤔

我不断看到的模式

说实话——React Native 应用不会很快消亡。它们会存在多年。
在这期间：

• FlatList 的性能开始出现瓶颈。
• FlashList 出现并成为新标准。
• react-native 提供的 SafeAreaView 已经不够用了。
• 我们转而使用 react-native-safe-area-context。

于是你会为一次决策更改而触及数十个文件。

这时我意识到——错误从来不是库的选择，而是我的应用对它的依赖太紧密。

我现在遵循的简单规则

• 永远不要在整个应用中直接使用核心或第三方组件。
• 包装一次，自己拥有它们。

我开始创建一层基础组件。

示例 1：列表（FlatList → FlashList）

我停止的做法

在所有地方直接使用 FlatList：

import { FlatList } from 'react-native';

我现在的做法：AppFlatList

// AppFlatList.tsx
import React from 'react';
import { FlatList, FlatListProps } from 'react-native';

export function AppFlatList(props: FlatListProps) {
  return (
    
  );
}

使用方式依旧简单：

 item.id}
/>

现在当性能成为问题（它迟早会），我也不慌了。

之后…切换到 FlashList

// AppFlatList.tsx
import { FlashList, FlashListProps } from '@shopify/flash-list';

export function AppFlatList(props: FlashListProps) {
  return ;
}

就这么简单。没有页面改动，没有周末重构，没有压力。

示例 2：基础组件废弃（SafeAreaView）

以前我们都这样使用：

import { SafeAreaView } from 'react-native';

后来有人说：“改用 react-native-safe-area-context。”

现在想象一下，SafeAreaView 到处都在——很痛苦，对吧？

// AppSafeAreaView.tsx
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';

export function AppSafeAreaView({ children, style }) {
  return (
    
      {children}
    
  );
}

使用方式：

现在无论 API 如何变化、内边距逻辑如何改动，或是 Android/iOS 行为以后有何不同，我都已经把它们隔离开来了。

这慢慢成为我的默认风格

我几乎对所有东西都这么做：

• AppText → 字体缩放、排版更新
• AppButton → 设计系统变更
• AppInput → 验证、焦点处理
• AppImage → 缓存、占位图
• AppPressable → 以后加入分析钩子

每当我犹豫并想“是不是直接用这个就行？”时，我就会想起自己有多少次后悔这种决定。

为什么这很重要（实话实说）

React Native 变化迅速，而你的应用却不会。因此只能：

• 每年追逐变化，或者
• 让你的应用从容吸收这些变化。

包装组件并不会拖慢你，后期重构才会。

最后思考

这并不是在做过度工程，而是尊重“变化是必然”的事实。

我包装组件不是因为我预期今天会出问题，而是因为我知道未来的自己会感到疲惫。

说实话？未来的自己值得更好的对待。