你确定了解React Hooks的useState函数？

富朝阳

已于 2024-03-19 09:30:54 修改

阅读量3.1k

点赞数 115

分类专栏： React 文章标签： useState React Hook useState的使用 useState注意事项

于 2024-03-04 06:00:00 首次发布

本文链接：https://blog.csdn.net/chaoPerson/article/details/136299053

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的博客原文：你确定了解React Hooks的useState函数？

useState函数简介

useState是 react 提供的一个定义响应式变量的 hook 函数，是函数组件保存数据的主要方法，等同于类组件的 this.state 与 this.setState，但是我们在使用的时候大多只了解他的更新数据，没有对其深入的了解，比如更新数据是同步呢还是异步？能否连续调用更新？是否支持深度对比的数据更新？今天我们来总结下，避免日后踩坑。

一、useState基本使用

useState基本语法如下：

const [state, setState] = useState(initialState)

initialState是你你希望 state 初始化的值。它 可以是任何类型的值，但对于函数有特殊的行为。在初始渲染后，此参数将被忽略。

如果 传递函数 作为 initialState，则它将被视为 初始化函数。它应该是纯函数，不应该接受任何参数，并且应该返回一个任何类型的值。当初始化组件时，React 将调用你的初始化函数，并将其返回值存储为初始状态。

下面我们来看一个案例，通过点击来更新展示点击后的次数

import React, { useState } from 'react'
function Test () {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
    // 传入一个函数，更新的值是基于之前的值来执行
    // setCount(count => count + 1)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

export default Test

页面渲染完成后，我们可以看到 count的值是 0，当我们点击按钮时，会将 count的值加 1，页面也同时更新；

二、同步更新还是异步更新？

我们来打印下每次同步更新前后的值

import React, { useState } from 'react'
function Test () {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    console.log('更新前的值', count)
    setCount(count + 1)
    console.log('更新后的值', count)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

export default Test

运行结果

我们发现控制台打印的数据是之前的值，所以是异步更新，相反如果我们用异步方式去修改数据，那么结果会不会改变呢？

import React, { useState } from 'react'
function Test () {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    console.log('更新前的值', count)
    setTimeout(() => {
      setCount(count + 1)
      console.log('异步更新后的值', count)
    }, 0)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

export default Test

运行结果

异步修改状态跟同步修改状态的结果是一致的，这也表明了 setCount 是异步更新的。

三、如何拿到更新后的值？

React为我们提供了另一个hook函数useRef，它可以让组件记住某些信息，并且变量信息不会触发渲染，适合处理视图外的业务逻辑，它和vue的ref很类似

import React, { useState } from 'react'
import { useRef } from 'react'
function Test () {
  const [count, setCount] = useState(0)
  const countRef = useRef(count)
  countRef.current = count
  const handleClick = () => {
    console.log('更新前的值', count)
    setTimeout(() => {
      setCount(count + 1)
      console.log('useRef异步更新后的值', countRef.current)
    }, 0)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

export default Test

useRef 返回一个这样的对象

{ 
  current: 0 // 你向 useRef 传入的值
}

用 countRef.current 属性访问该 ref 的当前值。这个值是有意被设置为可变的，意味着你既可以读取它也可以写入它。就像一个 React 追踪不到的、用来存储组件信息的秘密口袋。

效果如下

这样我们在操作完成后就拿到了更新后的值，是不是YYDS！

四、连续重复更新值会如何？

如果我们再点击的时候连续更新多次setCount(count + 1)，那么最后拿到的count会是多次执行后的结果吗？我们来看代码

import React, { useState } from 'react'
function Test () {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    console.log('更新前的值', count)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    console.log('连续更新后的值', count)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

export default Test

运行结果

运行结果是我们连续运行setCount函数，他只会进行最后一次更新。

五、深度对比的数据会更新吗？

我们来处理这样一个场景，我们现在要每次点击更新数组，每次点击往数组中push数据，然后在setCount更新

import React, { useState } from 'react'
function Test () {
  const [arr, setArr] = useState([1, 2, 3, 4])
  const pushData = () => {
    arr.push(5)
    console.log('push后的数据', arr)
    setArr(arr)
  }
  return (
    <div>
      <h4>{arr.join("-")}</h4>
      <button onClick={pushData}>点击添加数组</button>
    </div>
  )
}

export default Test

运行结果

我们打印了setCount之前的数据，确认数组更新，但是我们执行setCount函数后视图数据并没有更新。那么我们我可以得出结论：对于复杂类型的变量我们修改时需要重新定义，在原来数据的基础上修改不会引起组件的重新渲染，因为 React 组件的更新机制只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，就不会重新渲染组件。

那么我们有每次更新数组并且更新视图的需求怎么处理呢？

我们可以重新定义一个数组来修改，在原数组上的修改不会引起组件的重新渲染，React 组件的更新机制对只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，就不会重新渲染组件，来看代码

import React, { useState } from 'react'
function Test () {
  const [arr, setArr] = useState([1, 2, 3, 4])
  const pushData = () => {
    setArr([...arr, 5])
  }
  return (
    <div>
      <h4>{arr.join("-")}</h4>
      <button onClick={pushData}>点击添加数组</button>
    </div>
  )
}

export default Test

运行结果

是不是满足你的需求了，YYDS！

六、总结

今天就介绍到这里啦！希望能帮大家避坑！欢迎在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

css实现元素居中的6种方法

Angular8升级至Angular13遇到的问题

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

vite构建打包性能优化

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

ES6实用的技巧和方法有哪些？

css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

富朝阳

关注

115
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
0
评论
你确定了解React Hooks的useState函数？

useState是 react 提供的一个定义响应式变量的 hook 函数，是函数组件保存数据的主要方法，等同于类组件的 this.state 与 this.setState，但是我们在使用的时候大多只了解他的更新数据，没有对其深入的了解，比如更新数据是同步呢还是异步？能否连续调用更新？是否支持深度对比的数据更新？
复制链接

扫一扫