1
React Native（新架构）
2
JS 线程 ←→ JSI (C++) ←→ 原生 UI 组件
3

4
Flutter
5
Dart 代码 → Skia 引擎 → GPU 直接绘制（不依赖原生组件）
6

7
uniapp（App 端）
8
Vue 代码 → WebView / 原生混合渲染

1
JS Thread ←→ Bridge (异步 JSON 序列化) ←→ Native Thread

1
JS Thread ←→ JSI (C++ 直接引用) ←→ Native

1
// JSI 使用示例（C++ HostObject）
2
// JS 侧直接调用原生方法，无需 Bridge 序列化
3
global.nativeModule.doSomething(arg);

1
// 条件编译
2
// #ifdef APP-PLUS
3
// App 端特有代码
4
uni.scanCode({ success: (res) => {} });
5
// #endif
6

7
// #ifdef H5
8
// H5 端特有代码
9
window.scrollTo(0, 0);
10
// #endif
11

12
// #ifdef MP-WEIXIN
13
// 微信小程序特有代码
14
wx.login({});
15
// #endif

1
// uniapp 有两套生命周期
2

3
// 1. 应用生命周期（App.vue）
4
export default {
5
  onLaunch(options) {},    // 应用初始化（全局只触发一次）
6
  onShow(options) {},      // 应用进入前台
7
  onHide() {},             // 应用进入后台
8
  onError(err) {},         // 应用报错
9
  onPageNotFound() {},     // 页面不存在
10
};
11

12
// 2. 页面生命周期（页面 .vue）
13
export default {
14
  // Vue 生命周期
15
  beforeCreate() {},
16
  created() {},
17
  mounted() {},
18

19
  // uniapp 页面生命周期
20
  onLoad(options) {},      // 页面加载（可获取路由参数）
21
  onShow() {},             // 页面显示
22
  onReady() {},            // 页面初次渲染完成
23
  onHide() {},             // 页面隐藏
24
  onUnload() {},           // 页面卸载
25
  onPullDownRefresh() {},  // 下拉刷新
26
  onReachBottom() {},      // 触底加载
27
  onShareAppMessage() {}, // 分享
28
};

1
// 页面跳转
2
uni.navigateTo({ url: '/pages/detail?id=123' });
3
uni.redirectTo({ url: '/pages/detail' });   // 关闭当前页
4
uni.switchTab({ url: '/pages/home' });       // 跳转 tabBar
5
uni.navigateBack({ delta: 1 });              // 返回
6
uni.reLaunch({ url: '/pages/login' });       // 重启应用
7

8
// 接收参数
9
export default {
10
  onLoad(options) {
11
    console.log(options.id); // '123'
12
  }
13
};
14

15
// 复杂参数（序列化）
16
const data = encodeURIComponent(JSON.stringify({ a: 1, b: 2 }));
17
uni.navigateTo({ url: `/pages/detail?data=${data}` });
18

19
// 接收
20
onLoad(options) {
21
  const data = JSON.parse(decodeURIComponent(options.data));
22
}
23

24
// EventChannel（页面间通信）
25
uni.navigateTo({
26
  url: '/pages/detail',
27
  success: (res) => {
28
    res.eventChannel.emit('acceptData', { data: 'from prev page' });
29
  }
30
});

1
// 核心组件
2
import {
3
  View,           // div
4
  Text,           // span / p
5
  Image,          // img
6
  ScrollView,     // 滚动容器
7
  FlatList,       // 高性能列表
8
  SectionList,    // 分组列表
9
  TouchableOpacity, // 可点击容器
10
  TextInput,      // input
11
  Modal,          // 弹窗
12
  SafeAreaView,   // 安全区域
13
  StatusBar,      // 状态栏
14
} from 'react-native';
15

16
// FlatList（长列表必备）
17
<FlatList
18
  data={items}
19
  keyExtractor={(item) => item.id}
20
  renderItem={({ item }) => <ItemCard item={item} />}
21
  // 性能优化
22
  getItemLayout={(data, index) => ({
23
    length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index
24
  })}
25
  initialNumToRender={10}
26
  maxToRenderPerBatch={10}
27
  windowSize={10}
28
  removeClippedSubviews={true}
29
/>
30

31
// 样式
32
const styles = StyleSheet.create({
33
  container: {
34
    flex: 1,
35
    justifyContent: 'center',
36
    alignItems: 'center',
37
    backgroundColor: '#F5FCFF',
38
  },
39
});

1
// 1. 使用 FlatList 而非 ScrollView（长列表）
2
// FlatList 有窗口化渲染，只渲染可见区域
3

4
// 2. 避免不必要的重渲染
5
const Item = React.memo(({ item }) => (
6
  <View><Text>{item.name}</Text></View>
7
));
8

9
// 3. 图片优化
10
import FastImage from 'react-native-fast-image';
11
<FastImage
12
  source={{ uri: imageUrl, priority: FastImage.priority.high }}
13
  style={{ width: 200, height: 200 }}
14
  resizeMode={FastImage.resizeMode.cover}
15
/>
16

17
// 4. 减少 Bridge 通信（旧架构）
18
// 批量操作，避免频繁调用原生方法
19

20
// 5. 动画使用 useNativeDriver
21
Animated.timing(animatedValue, {
22
  toValue: 1,
23
  duration: 300,
24
  useNativeDriver: true, // 在原生线程执行
25
}).start();
26

27
// 6. InteractionManager（延迟非关键任务）
28
InteractionManager.runAfterInteractions(() => {
29
  // 在动画/交互结束后执行
30
  loadHeavyData();
31
});
32

33
// 7. Hermes 引擎
34
// 启用 Hermes 可以显著减少启动时间和内存占用

1
Flutter 三层架构：
2

3
┌─────────────────────────────────┐
4
│      Framework (Dart)           │
5
│  Material/Cupertino/Widgets     │
6
├─────────────────────────────────┤
7
│      Engine (C++)               │
8
│  Skia 绘图 / Dart VM / Text     │
9
├─────────────────────────────────┤
10
│      Embedder (平台层)           │
11
│  iOS / Android / Web / Desktop  │
12
└─────────────────────────────────┘

1
Widget (描述 UI) → Element (管理生命周期) → RenderObject (布局绘制)

1
// Widget 是不可变的描述
2
class MyWidget extends StatelessWidget {
3
  @override
4
  Widget build(BuildContext context) {
5
    return Container(
6
      padding: EdgeInsets.all(16),
7
      child: Text('Hello Flutter'),
8
    );
9
  }
10
}
11

12
// StatefulWidget 管理状态
13
class CounterWidget extends StatefulWidget {
14
  @override
15
  _CounterState createState() => _CounterState();
16
}
17

18
class _CounterState extends State<CounterWidget> {
19
  int _count = 0;
20

21
  void _increment() {
22
    setState(() => _count++); // 触发重建
23
  }
24

25
  @override
26
  Widget build(BuildContext context) {
27
    return Column(
28
      children: [
29
        Text('Count: $_count'),
30
        ElevatedButton(
31
          onPressed: _increment,
32
          child: Text('Increment'),
33
        ),
34
      ],
35
    );
36
  }
37
}

1
React Native 热更新：
2
1. 打包 JS Bundle（CodePush / 自建服务）
3
2. App 启动时检查版本
4
3. 下载新 Bundle 到本地
5
4. 重启加载新 Bundle
6

7
uniapp 热更新：
8
1. wgt 包（Widget 更新包）
9
2. 使用 plus.runtime.install 安装
10
3. 重启应用
11

12
Flutter 热更新（受限）：
13
1. Dart AOT 编译后无法直接热更新
14
2. 需要通过 Shorebird 等方案
15
3. 或者通过配置 + 服务端控制

1
// RN CodePush 热更新示例
2
import codePush from 'react-native-code-push';
3

4
const codePushOptions = {
5
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
6
  installMode: codePush.InstallMode.ON_NEXT_RESTART,
7
};
8

9
function App() {
10
  useEffect(() => {
11
    codePush.sync({
12
      updateDialog: true,
13
      installMode: codePush.InstallMode.IMMEDIATE,
14
    });
15
  }, []);
16

17
  return <MainApp />;
18
}
19

20
export default codePush(codePushOptions)(App);