React使用/更新useState数据

FIND方式

于 2021-10-13 18:54:10 发布

阅读量3.8k

点赞数 3

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_43091563/article/details/120746082

版权

react 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了React Hooks中的useState()函数，用于在函数组件中管理状态。文章阐述了启用状态、初始化、读取和更新状态的四步过程，并强调了useState()的使用限制，如只能在顶层和React函数中调用。此外，文章通过示例展示了如何正确更新数组和对象状态，避免状态浅对比导致的不必要的重渲染。最后，讨论了状态更新的策略，包括对象和数组状态的正确更新方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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