React Native 中的组件和 JSX 是如何工作的？

Question

Accepted Answer

React Native 使用 **React 的组件模型和 JSX** — 从返回 JSX 的可复用**组件**构建 UI。如果你了解 web 上的 React，这可以直接迁移；主要差异是使用原生组件而不是 HTML 元素。 ## 组件和 JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` 组件是可复用的 UI 片段（返回 JSX 的函数）；它们接受 **props**（输入）并组合成树 — 完全像 web 上的 React，但使用原生组件。 ## Props 和 state（React 概念） ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** 将数据传递到组件中；**state**（通过 `useState`）保存会触发重新渲染的变化数据 — 与 web 上的 React 模型相同。 ## React 知识迁移 ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## 为什么这很重要理解 React Native 中组件和 JSX 的工作原理很重要，因为 **React Native 建立在 React 的组件模型之上**，所以掌握它至关重要，而一个主要优势是 **React 知识可以直接迁移**。组件（返回 JSX 的可复用 UI 片段，接受 props 作为输入，并组合成树）和 JSX（用嵌入式表达式描述 UI 的语法）是 React Native 开发的基础 — 与 web 上的 React 相同。理解 **props**（将数据传递到组件）和 **state**（通过 `useState` hook，保存会触发重新渲染的变化数据）至关重要，因为这些 React 概念是 React Native 组件接收数据和管理变化的方式 — 与 web React 相同。 key insight 是 **React 知识迁移**：组件、JSX、props、state、hooks（useState、useEffect 等）、组合和 key 都与 web React 的工作方式相同，主要差异是使用原生组件（View、Text）而不是 HTML，以及不同的样式方式。这种可迁移性是 React Native 吸引人的主要原因 — 大量的 React/web 开发者可以直接将其大部分现有知识应用于构建原生移动应用，学习曲线相对较小，主要集中在原生组件和平台特性上。 Since React Native 本质上是应用于原生 UI 的 React（组件、JSX、props、state、hooks），理解这个模型对构建 React Native 应用至关重要，同时认识到 React 知识直接迁移（一个关键优势），理解 React Native 中的组件和 JSX 是必要的、基础性知识 — 是 React Native 的核心编程模型，构建应用所必需，特别是在突出 React/web 技能如何直接应用于 React Native 移动开发时更加宝贵。