第二十一章(跨端开发 面试真题)

面试真题

题目 1：React Native vs Flutter

React Native 和 Flutter 有什么区别？

答案：

• 语言：RN 使用 JavaScript/TypeScript，Flutter 使用 Dart
• 渲染：RN 使用原生组件，Flutter 使用 Skia 自研引擎
• 性能：Flutter 更好，包体积更大
• 学习成本：RN 较低，Flutter 较高

题目 2：跨端方案选择

如何选择合适的跨端开发方案？

答案：

• 小程序为主：选择 uni-app 或 Taro
• 追求性能：选择 Flutter
• 团队熟悉 React：选择 React Native
• 需要同时支持 Web：选择 Taro 或 React Native

题目 3：Electron vs Tauri

Electron 和 Tauri 有什么区别？各自适用场景？

答案：

• Electron：

• 优点：生态成熟、社区活跃、兼容性好
• 缺点：包体积大、内存占用高
• 适用：需要复杂 UI、丰富生态的应用

• Tauri：

• 优点：包体积小、性能好、安全性高
• 缺点：生态较新、文档较少
• 适用：对性能要求高、包体积敏感的应用

题目 4：Electron 安全措施

开发 Electron 应用需要注意哪些安全问题？

答案：

• 禁用 nodeIntegration，启用 contextIsolation
• 使用 preload 脚本暴露受限 API
• 内容安全策略（CSP）
• 验证所有 IPC 消息
• 避免使用 remote 模块
• 防止注入恶意代码

题目 5：Electron 进程间通信

描述 Electron 中主进程和渲染进程的通信方式

答案：

• IPC（Inter-Process Communication）：
• ipcMain.handle() / ipcRenderer.invoke()：请求-响应模式
• ipcRenderer.on() / webContents.send()：消息推送模式
• preload 脚本：
• 使用 contextBridge 安全暴露 API
• 避免直接暴露 Node.js API

题目 6：React Native 原理

React Native 的工作原理

答案：

• JSX 转换为 Native 组件
• Bridge 通信（异步）
• Virtual DOM
• 更新时重新渲染 Native 组件
• 支持自定义 Native 模块

题目 7：Flutter 渲染

Flutter 的渲染原理

答案：

• Skia 图形引擎
• Widget 树
• Element 树
• RenderObject 树
• 层合成

题目 8：uni-app vs Taro

uni-app 和 Taro 有什么区别？

答案：

• uni-app：基于 Vue，支持小程序/H5/App
• Taro：基于 React，支持多端
• 生态：uni-app 国内生态强
• 性能：Taro 3 更好

题目 9：Electron 性能优化

Electron 应用性能优化手段

答案：

• 减少内存占用
• 使用懒加载窗口
• 启用硬件加速
• 减少 CPU 占用
• 使用多进程
• 优化渲染性能

题目 10：小程序跨端框架

Taro 和 uni-app 对比

答案：

• Taro：React/Vue 双语法支持
• uni-app：Vue 语法为主
• 编译时 vs 运行时
• 社区活跃度
• 文档完善程度

题目 11：Electron 打包

Electron 应用打包工具

答案：

• electron-builder：功能全面
• electron-packager：轻量
• electron-forge：现代
• 支持多平台打包

题目 12：Flutter 状态管理

Flutter 状态管理方案

答案：

• Provider：官方推荐
• Riverpod：Provider 升级
• GetX：功能丰富
• Bloc：响应式
• Redux：全局状态

题目 13：React Native 热更新

React Native 热更新实现

答案：

• CodePush（微软）
• 增量更新
• 回滚机制
• 强制更新
• 热更新服务

题目 14：Tauri vs Electron

为什么 Tauri 更轻量？

答案：

• 使用 Rust 而非 Node.js
• 系统 WebView 而非 Chromium
• 运行时更小
• 内存占用更低

题目 15：Electron 多窗口

Electron 如何管理多窗口

答案：

• BrowserWindow 创建
• 窗口间通信
• 共享数据
• 窗口状态保存
• 窗口生命周期

题目 16：Flutter 性能优化

Flutter 性能优化手段

答案：

• 避免 rebuild
• 使用 const 构造
• 列表懒加载
• 图片缓存
• 减少 Opacity 使用
• RepaintBoundary