当前位置: 首页> 财经> 股票 > React 中 useState 语法详解

React 中 useState 语法详解

时间:2025/7/11 3:23:23来源:https://blog.csdn.net/weixin_40629244/article/details/140659974 浏览次数:0次

 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)})}

关键字:React 中 useState 语法详解

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: