React Hooks 指北（一）：useState

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

1. useState基本用法

useState是react的响应式数据用法，其用法如下

/*
数组的第一个参数num是基础数据
数组的第二个参数setNum表用于修改数据
*/
const [num,setNum] = useState(0)

2. useState修改基础数据

当点击修改时，数据自动+1

import {useState} from "react"
function StateTest () {
  let [num,setNum] = useState(0)
  return (
    <div>
      <div>{num}</div>
      <div onClick={()=>setNum(num+1)}>修改Num</div>
    </div>
  )
}

3. useState修改对象数据（数组和对象）

许多同学在初次使用useState修改数组或者对象数据时，发现页面根本不更新。如下所示

错误示例

import {useState} from "react"
function StateTest () {
  let [info,setInfo] = useState({
    name:"xiaoming"
  })

  function changeInfo() {
    info.name = "xiaoli"
    setInfo(info)
  }
  return (
    <div>
      <div>{info.name}</div>
      <div onClick={()=>changeInfo}>修改obj</div>
    </div>
  )
}

页面初次显示xiaoming。当我们点击修改obj时，无论咋样，页面始终无法更新。

原因： useState的数据更新必须是拷贝一份原来的数据（深拷贝），不能是在原来的对象数据上直接操作，页面根据上一层的state判断当前state是否引用地址相等，如果相等。那么页面不会更新。

正确示例

无论是对象还是数组，我们都可以先使用...运算符完成深拷贝

 function StateTest () {
  let [info,setInfo] = useState({
    name:"xiaoming"
  })

  function changeInfo() {
    //1.先深拷贝一份对象
    let obj = {...info}
    //2.修改数据
    obj.name = "xiaogang"
    //3.触发更新
    setInfo(obj)
  }
  return (
    <div>
      <div>{info.name}</div>
      <div onClick={()=>changeInfo()}>修改obj</div>
    </div>
  )
}

页面先显示xiaoming,点击修改obj,页面改变为xiaogang

4.useState批量更新问题

看下面的例子，如果我点击按钮，最后界面会显示? 是4还是2还是其它？

import {useState} from "react"
function StateTest () {
  let [num,setNum] = useState(1)

  function changeNum() {
    setNum(num+1)
    setNum(num+1)
    setNum(num+1)
  }
  return (
    <div>
      <div>{num}</div>
      <div onClick={()=>changeNum()}>修改num</div>
    </div>
  )
}

页面初始显示1，当点击后页面显示2

原因 useState的对同一个数据进行多次更新会出现合并现象，默认会选择最后一次数据进行更新。

如何解决批量更新？

useState的数组第二个参数可以传递一个函数，使用改函数可以完成同一份数据的批量更新

import {useState} from "react"
function StateTest () {
  let [num,setNum] = useState(1)

  function changeNum() {
    setNum((num)=>num+1)
    setNum((num)=>num+1)
    setNum((num)=>num+1)
  }
  return (
    <div>
      <div>{num}</div>
      <div onClick={()=>changeNum()}>修改num</div>
    </div>
  )
}
export default  StateTest

页面初始是1，当点击修改时，数据更改为4

总结

感谢各位观众老爷的支持，如果您感觉满意，可以点赞，评论，转发支持下，您的支持就是我创作的动力。