2、React开发中的JSX、Props、状态管理全解析

React开发中的JSX、Props、状态管理全解析

1. JSX基础与应用

JSX（JavaScript XML）是一种在React中使用的语法扩展，它允许我们在JavaScript代码中使用类似XML的标签来定义组件。与静态HTML相比，JSX的主要优势在于它支持内联JavaScript，从而可以在运行时控制视觉输出。

1.1 嵌入JavaScript表达式

在JSX中嵌入JavaScript表达式非常简单，只需将表达式用花括号 {} 包裹即可。以下是一些常见的嵌入表达式示例：
- 返回单个变量对象 ： {props.title} 返回 props.title 的值，并将其设置为 <Text> 组件的内容； {styles.engine} 返回 styles.engine 的值，并将其设置为 <View> 的 style 属性。

<Text>{props.title}</Text>
<View style={styles.engine}></View>

• 使用常量字符串 ：可以在表达式中使用常量字符串，例如 <Section title=