React 中 useState 语法详解

1. 语法定义

javascript 复制代码
const [state, dispatch] = useState(initData)

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

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

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

2. 使用案例

1. 变量的定义和修改

javascript 复制代码
import { useState } from 'react'

// 定义变量
const [name, setName] = useState('Vue')

// 修改变量
const handleUpdate = () => {
    setName('React')
}

2. 对象的定义和修改

javascript 复制代码
import { useState } from 'react'

// 定义对象
const [user, setUser] = useState({ name: '张三', age: 30 })

// 修改对象
const handleUser = () => {
    // setUser({ name: '李四', age: 50 })
    setUser({ ...user, age: 50 })
}

3. 数组的定义和修改

javascript 复制代码
import { useState } from 'react'

// 定义数组
const [list, setList] = useState(['Tom', 'Jack']);

// 修改数组
const handleList = () => {
    setList([...list, 'Lily'])
}

4. 声明时添加逻辑返回

javascript 复制代码
import { useState } from 'react'

const num = 1;

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

5. 更新时添加逻辑返回

javascript 复制代码
import { useState } from 'react'

// 定义变量
const [count, setCount] = useState(0);

// 修改变量
const handleCount = () => {
    // 通过函数返回
    setCount((count) => count + 1)

}

3. 异步更新

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

javascript 复制代码
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函数提高优级,这样就会又渲染一次。

javascript 复制代码
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)
    })

}
相关推荐
叫我阿柒啊1 天前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发
知识分享小能手1 天前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
知识分享小能手2 天前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
叫我阿柒啊2 天前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
lypzcgf4 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
小浣熊喜欢揍臭臭5 天前
react+umi项目如何添加electron的功能
javascript·electron·react
叫我阿柒啊5 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发