useState ——React 个人学习笔记（5）

useState 响应式状态

基本使用

在react中定义响应式状态的方式

先创一个用来测试的demo

function State() {
  return (
    <div>
      State测试
    </div>
  )
}

export default State

就跟vue的ref用来定义状态差不多

但是react的不能直接修改原值而是使用setState

示例如下

import { useState } from 'react'

function State() {
  const [state, setState] = useState(false)
  return (
    <>
      <div>{state.toString()}</div>
      <button type="button" onClick={() => { setState(!state) }}>setState</button>
    </>
  )
}

export default State

设置一个响应式对象或者数组

可以像这样使用展开运算符覆盖元对象去修改状态

import { useState } from 'react'

interface PeopleType {
  name: string
  age: number
  isMarried: boolean
}
function State() {
  const [people, setPeople] = useState<PeopleType>({ name: 'John', age: 30, isMarried: false })
  return (
    <>
      <div>{JSON.stringify(people)}</div>
      <button type="button" onClick={() => { setPeople({ ...people, age: people.age + 1 }) }}>setState</button>
    </>
  )
}

export default State

有几点需要注意的

• 在函数组件的一次执行上下文中,状态是不变的

function State() {
  const [state, setState] = useState(false)
  const hdlClick = () => {
    setState(true)
    console.log(state) // false
  }
  return (
    <>
      <div>{state.toString()}</div>
      <button type="button" onClick={hdlClick}>setState</button>
    </>
  )
}

• 如果初始值传的是函数会以函数的返回值做初始值

const [state, setState] = useState(() => false)

以上