使用 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;
})