React:第一个Hooks--useState简介

1.在什么场景使用useState

当你想要在函数组件中，使用函数状态时，就要使用useState这个Hooks

2.如何使用useState

useState这个是React 自带的，所以使用时要先引入

代码如下

import { useState } from 'react'
//  useState 是hook，hook是use开头的函数
const Count = () => {  
  // 0 是初始值
  // 返回值是一个数组
  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>
  )
}

参数：1.状态初始值，比如，传入0表示该状态的初始值为0

注意：这个状态的初始值可以是任意值（数值，字符串都可以），而class组件中的state必须是对象

2. 返回值：是一个数组，包含两个值：1.状态值 2修改该状态的函数（setState)

另我们可以使用解构简化setState的使用，语法约定：修改状态的函数名称都以set开头，后面跟上状态的名称

代码如下

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

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