# React Native 中使用 useState 管理状态与触发重渲染
在 React Native 开发中，组件的交互性依赖于对内部数据的动态管理。核心概念在于区分“属性”（Props）与“状态”（State）：Props 用于配置组件初始渲染时的内容，而 State 则用于存储那些随时间变化或由用户交互触发的数据，例如猫的饥饿程度。
## 定义包含可变数据的组件
要创建一个能管理可变数据的组件，首先需要引入 React 的 `useState` Hook。这是一个允许在函数组件中添加状态的特殊函数。
以下是一个名为 `Cat` 的基础组件示例，它使用 `useState` 来初始化一个表示猫是否饥饿的状态变量 `isHungry`，并默认值为 `true`：
```javascript
import { useState } from 'react';
import { Text, Button } from 'react-native';
const Cat = () => {
const [isHungry, setIsHungry] = useState(true);
return (
<Text>{isHungry ? '我饿了！' : '我不饿。'}</Text>
);
};
```
在此代码中，`useState(true)` 执行了两个关键操作：
1. 创建一个名为 `isHungry` 的状态变量，初始值为 `true`。
2. 创建一个名为 `setIsHungry` 的函数，用于更新该状态的值。
## 通过用户交互更新状态
为了让组件具备交互性，我们需要引入 `<Button>` 组件并绑定点击事件。当用户点击按钮时，会触发 `onPress` 回调函数，进而调用状态设置函数来改变数据。
在上面的示例中，我们可以添加一个按钮，点击后调用 `setIsHungry(false)`：
```javascript
<Button
onPress={() => {
setIsHungry(false);
}}
title={isHungry ? '喂我点吃的！' : '谢谢！'}
/>
```
## 状态变化触发重新渲染
当 `setIsHungry` 被调用时，组件内部的状态值发生了改变。React 会检测到这一变化，并自动重新运行该组件的函数体（即重新执行 `return <Text>...</Text>` 部分）。这意味着组件会根据新的 `isHungry` 值重新生成 UI 内容。
需要注意的是，虽然我们在代码中使用了 `const` 关键字来声明变量，但这并不意味着状态本身不可变。这里的 `const` 保证的是引用该状态对象（包含当前值和更新函数）的标识符不会改变，而状态的值可以通过提供的 setter 函数安全地更新。每次更新后，React 都会重新渲染组件以反映最新的数据。
通过这种方式，开发者可以轻松构建出响应用户操作、动态变化的 React Native 界面。