React hooks - useState

useState

- - 用法
  - 特点
  - 注意事项

在hooks出现之前，react的函数式组件也叫做无状态组件（函数里面无法创建属于自己的状态，只能使用props接收）

用法

一个管理状态的 hooks，能让函数组件拥有自己的状态，实现状态的初始化、读取、更新。

特点

状态变化时，会触发函数组件的重新执行，并根据最新的数据更新渲染 DOM 结构
以函数的形式为状态赋初始值
异步变更状态，useState() 返回一个以异步形式变更状态的函数，修改状态后无法立即拿到最新的状态
结合useEffect监听状态的变化

import React, { useState } from 'react'export const Count: React.FC = () => {const [count, setCount] = useState(0) // 默认初始值undefined，useState只有首次渲染会执行// 以函数的形式为状态赋初始值，useState也只会首次渲染执行，更新渲染不执行const [date] = useState(() => {const dt = new Date()return { year: dt.getFullYear(), mouth: dt.getMonth() + 1, day: dt.getDate()}})useEffect(()=>{console.log(count) // 可以监听到最新的值},count)console.log('组件被重新渲染了') // 每次 count 值发生变化，都会打印return (<><h1>{count}</h1> <button onClick={() => {setCount(count + 1)console.log(count) // 打印的还是上一次的值}}>+1</button><h2>{date.year}年{date.mouth}月{date.day}日{date.second}秒</h2></>)
}

注意事项

组件rerender时useState不会被重复初始化
要更新对象类型的值
须使用展开运算符或 Object.assign()生成新对象覆盖旧对象，才能触发组件的重新渲染

import React, { useState } from 'react'export const UserInfo: React.FC = () => {const [user, setUser] = useState({name: 'zs',age: 12})const updateUserInfo = () => {// user.name = 'Jesse Pinkman' // 错误使用：因为set 函数内部，会对更新前后的值进行对比，不会触发组件的重新渲染// 解决方案：用新对象的引用替换旧对象的引用，即可正常触发组件的重新渲染// setUser({ ...user })// setUser(Object.assign({}, user))setUser({ ...user, name: 'Jesse Pinkman' })}return (<><h1>用户信息：</h1><p>姓名：{user.name}</p><p>年龄：{user.age}</p><button onClick={updateUserInfo}>更新用户信息</button></>)
}

值异步更新
连续多次以相同的操作更新状态值时，React 内部会对传递过来的新值进行比较，值相同，则会屏蔽后续的更新行为，从而防止组件频繁渲染的问题。
当修改state状态时，如果新值依赖于旧值（基于旧值计算得到新值）时，不要直接在外部计算，通过函数的形参拿到旧值并计算最终return新值。

export const Count: React.FC = () => {const [count, setCount] = useState(() => 0)const add = () => {setCount(count + 1) // 两次操作后count值任然为1setCount(count + 1)}const addPrev = () => {setCount((c) => c + 1) // 传递了更新状态的函数进去,两次操作后count值为2setCount((c) => c + 1)}return (<><h1>当前的 count 值为：{count}</h1><button onClick={add}>+1</button><button onClick={addPrev}>+1</button></>)
}

模拟组件的强制刷新
useState 的状态发生了变化，就会触发函数组件的重新渲染，从而达到强制刷新的目的

import React, { useState } from 'react'export const FUpdate: React.FC = () => {const [, forceUpdate] = useState({})// 每次都会给 forceUpdate 传递一个新对象，从而触发组件的重新渲染const onRefresh = () => forceUpdate({})return (<><button onClick={onRefresh}>点击强制刷新 --- {Date.now()}</button></>)
}