React使用/更新useState数据


<>使用 useState() 进行状态管理

useState()是改变状态的开关，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。
import React, { useState } from 'react'; //1.启用状态 const [state, setstate] =
useState(initialState); //2.初始化状态 consloe.log(state); //3.读取 setstate(newState);
//4.更新状态
<>useState()使用回调更新状态

* 仅顶层调用：不能在循环，条件，嵌套函数等中调用useState()
* 仅从React 函数调用 :必须仅在函数组件或自定义钩子内部调用 setstate（ pre => return { ...pre } ）
状态一旦改变，React 就会重新渲染组件，state变量获取新状态值。
React组件的更新机制对state只进行浅对比

<>状态：简单（值）类型

<>状态：引用类型

<>数组
const [state, setstate] = useState([1,2,3]); setstate( (pre)=>{ pre.push(4);
return [...pre] } )
<>数组套对象
const [state, setstate] = useState([{id:1},{id:2}]); setstate( (pre)=>{ pre[i].
id= 'id'; return [...pre] } )
<>对象
const [state, setstate] = useState({name:'zhangsan'}); setstate({ ...state;
state.name : newname; })
<>对象数组
const [state, setstate] = useState({name:'zhangsan'},arr:[1,2,3]); let temp = [
...state.arr]; temp.push(4); setstate({ ...state; state.arr : temp; })

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy