hooks中的useState的详解

最新推荐文章于 2025-06-17 10:11:42 发布

原创最新推荐文章于 2025-06-17 10:11:42 发布 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript #react.js

本文详细介绍了React Hooks中的useState和setState的用法，包括它们的初始值设置、函数式更新以及多次操作state的策略。通过示例展示了直接修改值与函数式更新的区别，强调了在进行多次state操作时应使用函数式更新以确保获取最新值。同时，文章提到了setState不能局部更新对象的问题，并给出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useState的定义

const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

useState的定义初始值的两种写法

写法一：

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

写法二：

const [user, setUser] = React.useState(() => ({ name: '张三', age: '18' }))

两种写法的区别如下：

useState可以传入对象，但是js引擎会解析这个对象，计算9+9，造成多余的运算

useState可以传入一个函数，函数并不会执行

这样写的好处是js只会在初始化值的时候执行一次函数

之后就不会再查看这个函数

setState的两种写法

const UseState = (props) => {
  const [count, setCount] = React.useState(0)
  //写法一：直接修改值
  const add = () => {
     setCount(count+1) //第一种写法
     setCount(count+1) //第一种写法，不能加2
  }
  //写法二：函数式更新
  const addFn = () => {
     setCount((count) => count + 1)
     setCount((count) => count + 1)
  }
  return (
    <div>
      <h2>当前求和为：{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={addFn}>点我+1</button>
    </div>
  )
}

通过执行以上函数可以发现，函数式更新点击+1是可以直接+2的，但是直接修改值则只能+1

对state进行多次操作，建议使用函数写法,因为函数里的count始终是最新的值。

这里有个小知识点，setState是不可以局部更新的，如果对象里的属性只改了一个，那么会覆盖所有的属性

如下：

const UseState = (props) => {
  const [user, setUser] = React.useState(() => ({ name: '张三', age: '18' }))
  const changeUser = () => {
    //setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖,如下age会被覆盖掉
    setUser({
      name: '王五', //这里的name覆盖之前的name
    })
  }
  return (
    <div>
      <button onClick={changeUser}>点我修改人员</button>
      <h1>
        {user.name} 年龄：{user.age}
      </h1>
    </div>
  )
}

通过执行发现，age消失了，可以使用如下写法

setUser({
  ...user, //拷贝之前的所有属性
  name: '王五', //这里的name覆盖之前的name
})