React 中 useState 语法详解

 1. 语法定义

const [state, dispatch] = useState(initData)

state：定义的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。

dispatch：改变state的函数，推动函数渲染的渲染函数，有非函数和函数两种情况。

initData：state的初始值，有非函数和函数两种情况。

2. 使用案例

1. 变量的定义和修改

import { useState } from 'react'  // 定义变量 const [name, setName] = useState('Vue')  // 修改变量 const handleUpdate = () => {     setName('React') }

2. 对象的定义和修改

import { useState } from 'react'  // 定义对象 const [user, setUser] = useState({ name: '张三', age: 30 })  // 修改对象 const handleUser = () => {     // setUser({ name: '李四', age: 50 })     setUser({ ...user, age: 50 }) } 

3. 数组的定义和修改

import { useState } from 'react'  // 定义数组 const [list, setList] = useState(['Tom', 'Jack']);  // 修改数组 const handleList = () => {     setList([...list, 'Lily']) } 

4. 声明时添加逻辑返回

import { useState } from 'react'  const num = 1;  // 声明通过函数返回 const [name ,setName] = useState(()=>{     if(num==1){         return "这是单数"     }else{         return "这是双数"     } }) 

5. 更新时添加逻辑返回

 import { useState } from 'react'  // 定义变量 const [count, setCount] = useState(0);  // 修改变量 const handleCount = () => {     // 通过函数返回     setCount((count) => count + 1)  } 

3. 异步更新

React是异步更新，它会将多次更新合并到一起。

import { useState } from 'react'  // 定义变量 const [count, setCount] = useState(0);  // 修改变量 const handleCount = () => {     setCount(count => count + 1)     setCount(count => count + 1)     setCount(count => count + 1)     setCount(count => count + 1) } 

由于React是异步合并更新，上面调用了4次setCount会统一合并，值会变为4，但只会渲染一次。

如果想要强制刷新渲染，可以使用flushSync函数提高优级，这样就会又渲染一次。

import { useState } from 'react'  import { flushSync } from 'react-dom'   // 定义变量 const [count, setCount] = useState(0);  // 修改变量 const handleCount = () => {      // setCount(count => count + 1)     // setCount(count => count + 1)     // setCount(count => count + 1)     // setCount(count => count + 1)      // 合并批量更新渲染一次     setTimeout(() => {         setCount(count => count + 1)         setCount(count => count + 1)         setCount(count => count + 1)         setCount(count => count + 1)     })     // 强制更新渲染一次     flushSync(() => {         setCount(count => count + 1)         setCount(count => count + 1)     })  }