state定义数据

约 588 字大约 2 分钟

2026-09-16

state 是 React 中用于组件内部管理数据的一种机制。通过 state，组件可以在运行时动态地更新和渲染数据，从而实现交互式的用户界面。

最常用的方式是使用 useState hook 来定义和管理组件的状态。

import { useState } from 'react'

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

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>
        Count:
        {count}
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

useState

useState 是 React 提供的一个 hook，用于在函数组件中添加状态管理功能。它返回一个数组，包含当前状态的值和一个用于更新状态的函数。

在对状态进行更新时，React 会重新渲染组件，从而使界面反映最新的状态。

const [state, setState] = useState(initialState)

// setState 有以下几种更新方法

// 1. 直接传入新的状态值
setState(newState)

// 2. 传入一个函数，该函数接收当前状态作为参数，并返回新的状态值
setState((prevState) => {
  // 根据当前状态计算新的状态值
  return newState
})

提示

这里有一个需要注意的点, 我们拿到的 state 是一个不可变的值, 也就是说我们不能直接修改它, 而是需要通过 setState 来更新它。

比如这样写其实是不能正确工作的:

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

  function handleClick() {
    count += 1 // ❌ 直接修改 state 是不允许的
    setCount(count) // 这里传入的 count 其实还是原来的值, 所以不会触发重新渲染
  }

  return (
    <div>
      <p>
        Count:
        {count}
      </p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

提示

在使用 useState 时，要注意状态的更新是异步的，所以不要在更新状态后立即使用新的状态值。

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

  function handleClick() {
    setCount(count + 1)
    console.log(count) // ❌ 这里打印的 count 还是旧的值

    // 而且还有一个问题
    // 就算你写再多个这样的式子, 他也是异步更新的, 所以这里他们最后都会变成一个相同的值, 也就是 count + 1
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)

    // 正确的解决方法就是使用函数的方式来更新状态, 这样就可以拿到最新的状态值了
    setCount(prevCount => prevCount + 1)
    setCount(prevCount => prevCount + 1)
    setCount(prevCount => prevCount + 1)
  }

  return (
    <div>
      <p>
        Count:
        {count}
      </p>
      <button onClick={handleClick}>
        Increment
      </button>
    </div>
  )
}