react - 02.useState

1.useState

useState是React的内置函数，作用是让函数组件也可以维护自己的状态，简单的理解就是，useState是改变状态的开关，能够完成对状态的初始化，读取和更新

useState返回一个，其中第一项是状态值，第二项是一个更新状态的函数

useState默认值是undefined

useState语法：

const [userName, resetName] = useState("xiaoming")

// 以函数形式赋值
const [userName, resetName] = useState(() => {
  return "xiaoming"
})

// 以对象形式赋值
const [userName, resetName] = useState({
  userName:"xiaoming"
})

需要注意的是，如果以函数的形式赋值，javascript引擎每次都会解析初始值，如果写成箭头函数形式，该函数就不会立即执行，只有在第一次初始化函数用到的时候，才会执行，这样可以减少计算过程

例子：

import { useState } from 'react'
const App = () => {
  const [userName, resetName] = useState("xiaoming")
  const handleChange = () => {
    resetName("xiaohong")
  }
  return (
    <div>
      <button onClick={handleChange}>click: {userName}</button>
    </div>
  )
}
export default App

需要注意的是，useState不会自动合并更新对象，所以需要使用展开运算符...或者Object.assign

import { useState } from 'react'
const App = () => {
  type Person = {
    name: string,
    age: number,
    sex: boolean,
    height: string | number
  }
  const [userName, resetName] = useState<Person>({
    name: "xiaoming",
    age: 22,
    sex: true,
    height: ""
  })
  const requestHandle = () => {
    const data = { height: "180" }
    const info = { ...userName, ...data }
    resetName(info)
  }
  return (
    <div>
      <div>userName: {userName.name}</div>
      <div>userAge: {userName.age}</div>
      <div>userSex: {userName.sex ? '男' : '女'}</div>
      <div>userHeight: {userName.height}</div>
      <button onClick={requestHandle}>change</button>
    </div>
  )
}
export default App

需要注意的是：

最好将useState写在函数的起始位置，主要是为了方便阅读

严禁让useState出现在代码块，以及判断和循环中

useState返回的函数，数组的第二项，引用这个是不会变化的