react笔记（九）—— useState基本使用

小徐今天学习了吗
302 阅读3分钟

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

前言

大家好呀，我是L同学。在上篇文章react笔记（八）—— hooks基本介绍中，我们学习了hooks基本介绍、hooks渐进策略等相关知识点。在本篇文章中，我们将学习到useState基本使用、useState状态的读取和修改、useState组件的更新过程等相关知识点。

useState基本使用

一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等。从名称上看，Hook 都以 use 开头useXxx。

useState能为函数组件提供状态。当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了。

useState使用步骤：

  1. 导入useState函数
  2. 调用useState函数，并传入状态的初始值
  3. 从useState函数的返回值中，拿到状态和修改状态的函数
  4. 在 JSX 中展示状态
  5. 在按钮的点击事件中调用修改状态的函数，来更新状态
import { useState } from 'react'

const Count = () => {  
  // 返回值是一个数组
  const stateArray = useState(0)

  // 状态值 -> 0
  const state = stateArray[0]
  // 修改状态的函数
  const setState = stateArray[1]

  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook -> {state}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  )
}

参数：状态初始值。比如，传入 0 表示该状态的初始值为 0。注意：此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象。

返回值：数组，包含两个值。第一个值是状态值（state），第二个值是修改该状态的函数（setState）

当然，我们可以使用数组解构简化useState的使用。约定修改状态的函数名称以 set 开头，后面跟上状态的名称。

// 解构出来的名称可以是任意名称

const [state, setState] = useState(0)
const [age, setAge] = useState(0)
const [count, setCount] = useState(0)

useState-状态的读取和修改

状态的使用分为读取状态和修改状态。

  1. 读取状态：该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用。
  2. 修改状态：
  • setCount(newValue)是一个函数，参数表示新的状态值
  • 调用该函数后，将使用新的状态值替换旧值
  • 修改状态后，因为状态发生了改变，所以，该组件会重新渲染

修改状态的时候，一定要使用新的状态替换旧的状态，不要直接修改旧的状态，尤其是引用类型。

useState-组件的更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化：

  • 组件第一次渲染：
  1. 从头开始执行该组件中的代码逻辑
  2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
  3. 渲染组件，此时，获取到的状态 count 值为： 0
  • 组件第二次渲染：
  1. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
  2. 组件重新渲染时，会再次执行该组件中的代码逻辑
  3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
  4. 再次渲染组件，此时，获取到的状态 count 值为：1

需要注意的是useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值。React 组件会记住每次最新的状态值。

avatar
文章
阅读
粉丝