Skip to content
React Native 核心概念
概述
React Native 的组件、JSX 以及 Props/State 体系直接继承自 React。阅读本章的前提是已经掌握 React 函数组件、Props、State 和 ES6 语法。React Native 并没有引入一套新的抽象，它的核心思路是把同一套组件思想搬到原生平台上执行。
组件
函数组件与类组件
React 生态里的两种组件形式——类组件和函数组件——在 React Native 中都可以使用。
类组件需要继承 React.Component，实现 render 方法，并通过 this.props 读取父组件传入的数据。
tsx
import React, { Component } from 'react';
import { Text } from 'react-native';
class Greeting extends Component {
render() {
return <Text>Hello, {this.props.name}</Text>;
}
}函数组件直接写成接收 props 并返回 JSX 的函数，天然支持 Hook，也是 React 官方当前推荐的写法。
tsx
import React from 'react';
import { Text } from 'react-native';
function Greeting({ name }: { name: string }) {
return <Text>Hello, {name}</Text>;
}两种写法在 React Native 中都能正常运行。类组件无法使用 Hook；在新架构的某些渲染路径中，函数组件还具备额外的性能优势。
JSX 书写规则
JSX 在浏览器端最终生成 DOM 节点，在 React Native 中则生成原生视图节点。书写形式上两者相似，但可用标签不同——<div>、<span> 等 HTML 标签无效，必须使用 React Native 提供的核心组件。
tsx
// Web 环境
<div>
<h1>Title</h1>
<p>Content here</p>
</div>
// React Native 环境
<View>
<Text>Title</Text>
<Text>Content here</Text>
</View>此外，React Native 的 JSX 不使用 HTML 风格的属性名。属性名统一采用驼峰命名：className 替换为 style，onclick 替换为 onPress。文本内容必须作为 <Text> 的子节点，不能直接放在 <View> 下。
Props：只读的外部输入
接收 Props 并渲染内容
Props 是组件对外的接口。父组件通过 Props 将数据传给子组件，子组件以函数参数的形式接收。
tsx
import React from 'react';
import { View, Text } from 'react-native';
interface UserCardProps {
name: string;
email: string;
}
function UserCard({ name, email }: UserCardProps) {
return (
<View>
<Text>{name}</Text>
<Text>{email}</Text>
</View>
);
}
// 使用方式
<UserCard name="Alice" email="alice@example.com" />通过 TypeScript 的 interface 标注 props 类型后，编译器会检查父组件传入的值是否匹配。
单向数据流与只读性
React 的数据流是单向的：数据始终从父组件流向子组件，Props 在子组件内部不允许修改。
如果在函数组件中尝试为 props.name 赋值，TypeScript 会在编译阶段报错；即便没有类型检查，React 运行时也会给出警告。
这不是额外的限制，而是一种保证：定位界面问题时，只需沿着组件树向上追溯数据来源，不会出现某个子组件私自篡改数据导致其他部分状态混乱的情况。
State：内部可变数据
使用 useState 触发界面更新
Props 来自外部且只读，而界面的动态变化——按钮点击、输入框内容变化、列表滚动——需要通过组件内部的 State 实现。
函数组件使用 useState 声明状态：
tsx
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
function Counter() {
const [count, setCount] = useState(0);
return (
<View>
<Text>当前计数：{count}</Text>
<Button title="+1" onPress={() => setCount(count + 1)} />
</View>
);
}调用 setCount 之后，React Native 会重新执行该函数组件，生成新的 JSX 树，再与上一次的生成结果进行差异比较，只更新对应的原生视图。整个过程和 React 在浏览器中的行为一致。
Props 与 State 的职责边界
一段数据应该放到 Props 还是 State，取决于所有权：
- 数据来自父组件，当前组件不负责改变它 → Props
- 数据由当前组件自己产生、维护并更新 → State
常见的模式是：父组件持有 State，通过 Props 传递给子组件；子组件通过回调将用户交互事件上报给父组件，由父组件决定是否更新 State。数据流向仍然保持单向。
核心组件与原生视图
View、Text、Image、TextInput、ScrollView
React Native 内置了一组跨平台核心组件，每个组件都直接对应平台的某个原生视图。
| 组件 | 用途 | iOS 原生视图 | Android 原生视图 | 备注 |
|---|---|---|---|---|
View | 容器，布局基块 | UIView | View | 默认采用 Flexbox 布局 |
Text | 显示文本 | UITextView / UILabel | TextView | 文本必须作为 Text 的子节点 |
Image | 显示图片（本地/网络） | UIImageView | ImageView | 网络图片需指定尺寸 |
TextInput | 文本输入框 | UITextField / UITextView | EditText | 键盘行为由平台管理 |
ScrollView | 可滚动容器 | UIScrollView | ScrollView | 内容超出屏幕尺寸时使用 |
以上组件几乎会出现在每一个 React Native 页面中：View 充当容器，Text 显示文字，Image 显示图片，TextInput 接收输入，ScrollView 处理滚动。对照 Web 端的 <div>、<p>、<img>、<input>，可视为对应的原生映射。
组件层级到原生视图树的转化
JSX 中编写的组件嵌套最终会在平台上生成对应的原生视图层级。
tsx
<View>
<Text>用户名</Text>
<TextInput placeholder="请输入" />
</View>这段 JSX 在 React Native 运行时的转化结果如下：
UIView (iOS) / View (Android)
├── UILabel / TextView → "用户名"
└── UITextField / EditText → 输入框转化过程不经过 WebView。渲染层负责完成这次映射：在老架构里，Bridge 将 Shadow Tree 发送到原生端；在新架构（Fabric）中，原生视图由 C++ 层直接创建。通信链路在概述篇已有详细说明，这里不再展开。
StyleSheet 基本使用
React Native 通过 StyleSheet 声明样式，语法接近 CSS，实质是 JavaScript 对象。
tsx
import { StyleSheet, View, Text } from 'react-native';
function Profile() {
return (
<View style={styles.container}>
<Text style={styles.title}>个人资料</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 16,
backgroundColor: '#fff',
},
title: {
fontSize: 18,
fontWeight: 'bold',
},
});直接传入普通对象也可以正常工作，但使用 StyleSheet.create 有两个好处：TypeScript 能校验属性名合法性；样式对象会被注册到原生端，避免每次渲染都重新序列化。
样式属性同样采用驼峰命名，与 Web CSS 不完全对应，例如 background-color 写作 backgroundColor，font-size 写作 fontSize。布局默认使用 Flexbox，每个 View 的默认 flexDirection 为 column（Web 端为 row），但详细的布局语法不在本章展开。
附录：参考链接
- [1] React 官方文档——Component：https://zh-hans.react.dev/reference/react/Component
下一章
React Native 环境搭建与第一个应用。