react 中的状态是什么？它是如何使用的？

在 React 中，状态（State） 是组件中用来记录“会随时间变化的数据”的对象。它是 React 最核心的概念之一。

1. React 中的状态是什么？

React 的 状态（state） 是一种用于控制组件行为和界面展示的数据结构。

特点：

• 组件自己管理的、可变的数据

• 数据变化会触发组件重新渲染（re-render）

• 与 props 不同，state 属于组件自身，不由父组件直接控制

例子中的 state 可以是：

• 表单输入值

• 异步加载的数据（如接口返回的数据）

• 页面当前 Tab

• 弹窗是否显示

• 计数器数字

2. React 状态如何使用？

React 提供了专门的 API 来管理状态。

函数式组件：使用 useState

最常用：

import { useState } from 'react';

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

  return (
    <div>
      <p>当前数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

说明：

• count —— 状态变量

• setCount —— 修改状态的方法

• 调用 setCount() 后组件会重新渲染

class 类组件：使用 this.state 和 this.setState

旧写法，但还在一些项目中使用：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>当前数量：{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          增加
        </button>
      </div>
    );
  }
}

3. 状态的特点总结

特点	说明
私有性	状态属于组件自身
可变性	可以通过 setState/useState 修改
触发渲染	状态改变会让组件重新渲染
异步性	状态更新通常是异步的（尤其在批量更新时）

4. 状态与 props 的区别

对比项	state（状态）	props（属性）
数据来源	组件自身维护	父组件传入
能否修改	可以修改（用 setState / setXXX）	不能修改（只读）
是否触发渲染	会	会
使用场景	会变化的数据	外部传来的数据或配置

5. 状态的核心作用

让 React 知道什么时候需要更新 UI

你不需要操作 DOM，React 会在 state 变化时自动更新页面，这就是 React 的“声明式 UI" 核心。