第13课：状态变化
进度 0/30
🔄
状态变化
数据一变，界面跟着变
📖知识引入
📸状态：APP此刻的快照
状态（State）= APP在某一刻的样子：点赞数是几、开关开着吗、第几关了……拍张「快照」，界面照着快照来画。
✏️改状态，界面自动刷新
想让界面变？别直接去改界面，改状态！状态一变，框架自动把界面重画一遍。就像换布景，舞台（界面）自动跟上。
📡单向数据流
数据流动像单向车道：状态 → 界面。用户的操作 → 改变状态 → 界面更新。方向固定，出了问题也好排查。
⏳加载状态别忘了
数据从网络下载需要时间，这时要显示「转圈圈」的加载状态，而不是白屏。等待也要让用户知道「正在加载中……」。
💡为什么要学状态
点赞、开关、购物车数量、页面第几页……全是状态。理解状态，你就理解了现代APP的心跳。让AI写代码时，你也要能说清「什么状态、怎么变」。
💡
界面是状态的影子：改状态，别直接改界面！
🔍点赞数是怎么变的
// React Native：useState 状态管理
import { useState } from "react";
import { Text, Button, View } from "react-native";
export default function Counter() {
const [count, setCount] = useState(0); // 状态初始值 0
return (
<View>
{/* 界面显示状态的值 */}
<Text>当前计数：{count}</Text>
{/* 点按钮只改状态，界面自动刷新 */}
<Button title="+1" onPress={() => setCount(count + 1)} />
</View>
);
}状态驱动的完整链条：
初始状态：{ 点赞数: 10 }
│
▼
┌────────────────┐
│ 界面显示：❤️ 10 │
└────────────────┘
│
用户点了赞 👆
│
▼
状态更新：{ 点赞数: 11 }
│
▼
┌────────────────┐
│ 界面自动变：❤️ 11│ ← 不用手动改！
└────────────────┘对比一下 😵 反面教材： 「直接在屏幕上把10改成11」 → 其他地方显示的10全忘了改， 数据对不上，Bug满天飞。
所以记住： 改数据，界面自己跟上； 这就是状态管理！
🎯小测验
第1题：「状态（State）」可以理解为？
第2题：想让界面上的数字变化，正确做法是？
第3题：数据从网络加载需要几秒，界面应该显示什么？
📝本课知识点
- ✓状态=APP此刻的快照
- ✓改状态，界面自动刷新
- ✓数据流：状态→界面，单向车道
- ✓加载中要给用户看得到
- ✓点赞、开关、购物车都是状态
第13课完成！继续探索下一课吧 🚀