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