Day_5：让页面动起来——事件、state 与 useState

预计用时：40～60 分钟。

今日目标

理解“事件 → 函数 → state 更新 → 界面更新”
使用 Pressable
使用 useState
完成学习打卡计数器

1. state 是什么

页面中会变化的数据叫状态（state）。在函数组件中，用 useState 保存它：

import { useState } from 'react';

const [count, setCount] = useState(0);

count 是当前数值；setCount 是更新它的方式。调用后，React 会重新渲染受影响的界面。

2. 加一个按钮

import { Pressable, Text, View } from 'react-native';

<View>
  <Text>今日学习次数：{count}</Text>
  <Pressable onPress={() => setCount(count + 1)}>
    <Text>+1</Text>
  </Pressable>
</View>

用户点击 Pressable，触发 onPress，再通过 setCount 更新数值；Text 中的 {count} 会显示新值。

今日任务：学习打卡计数器

在昨天的个人信息卡片下方加入计数器：

今日学习打卡
当前完成：0 次
[ +1 ] [ -1 ] [ 重置 ]

要求：+1 增加一次；-1 减少一次但不能小于 0；重置按钮使次数回到 0；为按钮添加明显的背景色、内边距和圆角。

-1 的逻辑可以写成：

setCount((current) => Math.max(0, current - 1));

验收标准

使用 useState
使用至少一个 Pressable
+1、-1、重置均可用
数值不会小于 0
点击后界面会立即更新

思考题

为什么不要写 count++，而要调用 setCount？提示：React 需要知道状态发生了变化，才能安排重新渲染。

1.7 KiB Raw Blame History Unescape Escape