©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>使用 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; })