这一章不是把 React 面试题换一套组件名，而是围绕真实 React Native 岗位常见要求展开：能写跨端业务、理解运行原理、能和 iOS/Android 原生协作、能定位性能与发布问题。

1 基础与选型

React Native 的本质是什么？它与 React Web 有什么区别？

⚡ 30 秒速记

• React Native 复用的是 React 的声明式编程模型，不是浏览器的 DOM 和 CSS
• View、Text 等最终对应平台原生视图，而不是 div、span
• 布局主要由 Yoga 计算，样式是 JavaScript 对象，只支持 RN 声明的属性子集
• 业务逻辑可以高度复用，但导航、权限、推送、支付和系统生命周期仍有明显平台差异

React Native 复用的是 React 的组件、状态和更新模型，但最终渲染的是 iOS、Android 原生视图，而不是浏览器 DOM。 JSX 形成元素树后，会经过 RN 的渲染、布局和提交流程，View、Text 等组件再映射到原生实现。它没有完整的 DOM、BOM 和 CSS，例如文本必须放进 Text，默认 flexDirection 也是 column。业务逻辑通常可以复用，但权限、系统生命周期以及相机、推送等平台能力仍要分别处理。

React 负责组件、状态、协调与更新，React Native 提供宿主环境和原生组件实现。JSX 会形成 React Element Tree，渲染器再把它转换成 RN 的 Shadow Tree，经过布局和提交后挂载为 iOS/Android 的原生视图。

它与 Web 的关键区别有：

• 没有浏览器 DOM、BOM 和完整 CSS；文本必须放在 Text 中。
• 默认 flexDirection 是 column，尺寸一般表示与密度无关的逻辑像素。
• 网络、文件、相机、定位和推送等能力受原生权限、系统生命周期与应用商店规则约束。
• RN 能热更新 JavaScript/资源，但涉及原生二进制、权限声明或 SDK 的变化通常必须重新发版。

完整代码示例

import { useMemo, useState } from 'react'
import { Platform, Pressable, Text, View } from 'react-native'

export default function InterviewExample() {
  const [count, setCount] = useState(0)
  const label = useMemo(() => `React Native 的本质是什么？它与 React Web 有什么区别？: ${count}`, [count])
  return <View accessibilityLabel="interview-example" style={{ padding: 16 }}>
    <Text>{label}</Text>
    <Text>Platform: {Platform.OS}</Text>
    <Pressable accessibilityRole="button" onPress={() => setCount((value) => value + 1)}><Text>Run</Text></Pressable>
  </View>
}