React 中 useState 语法详解

 1. 语法界说

1. const [state, dispatch] = useState(initData)

复制代码

state：界说的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。
dispatch：改变state的函数，推动函数渲染的渲染函数，有非函数和函数两种情况。
initData：state的初始值，有非函数和函数两种情况。

2. 使用案例

1. 变量的界说和修改

1. import { useState } from 'react'
3. // 定义变量
4. const [name, setName] = useState('Vue')
6. // 修改变量
7. const handleUpdate = () => {
8.     setName('React')
9. }

复制代码

2. 对象的界说和修改

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

复制代码

3. 数组的界说和修改

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

复制代码

4. 声明时添加逻辑返回

1. import { useState } from 'react'
3. const num = 1;
5. // 声明通过函数返回
6. const [name ,setName] = useState(()=>{
7.     if(num==1){
8.         return "这是单数"
9.     }else{
10.         return "这是双数"
11.     }
12. })

复制代码

5. 更新时添加逻辑返回

2. import { useState } from 'react'
4. // 定义变量
5. const [count, setCount] = useState(0);
7. // 修改变量
8. const handleCount = () => {
9.     // 通过函数返回
10.     setCount((count) => count + 1)
12. }

复制代码

3. 异步更新

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

1. import { useState } from 'react'
3. // 定义变量
4. const [count, setCount] = useState(0);
6. // 修改变量
7. const handleCount = () => {
8.     setCount(count => count + 1)
9.     setCount(count => count + 1)
10.     setCount(count => count + 1)
11.     setCount(count => count + 1)
12. }

复制代码

由于React是异步归并更新，上面调用了4次setCount会同一归并，值会变为4，但只会渲染一次。
如果想要逼迫刷新渲染，可以使用flushSync函数进步优级，这样就会又渲染一次。

1. import { useState } from 'react'
3. import { flushSync } from 'react-dom'
6. // 定义变量
7. const [count, setCount] = useState(0);
9. // 修改变量
10. const handleCount = () => {
12.     // setCount(count => count + 1)
13.     // setCount(count => count + 1)
14.     // setCount(count => count + 1)
15.     // setCount(count => count + 1)
17.     // 合并批量更新渲染一次
18.     setTimeout(() => {
19.         setCount(count => count + 1)
20.         setCount(count => count + 1)
21.         setCount(count => count + 1)
22.         setCount(count => count + 1)
23.     })
24.     // 强制更新渲染一次
25.     flushSync(() => {
26.         setCount(count => count + 1)
27.         setCount(count => count + 1)
28.     })
30. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。