React中的hook之useState1.useState介绍 useState是react中用于基本数据类型或

1.useState介绍

useState是react中用于基本数据类型或数组,对象,作为状态变量,向组件中增加,更新状态,简单来说,react项目只要关系到数据改变,重新渲染,都需要使用useState.

2.何时使用useState

当我们在组件提交表单,更改样式,计算等等,需要重新渲染页面的操作,都需要使用useState

2.使用方法

useState赋值时,需要使用数组的形式,分别添加状态值value和setValue,这是标准的书写方式,而useState中后面包含的即为所定义变量的初始值( initialState),状态创建非常容易,操作状态的改变是学习 useState的重中之重:

1.基本数据类型:

//引入
import { useState } from 'react'

//类型: string,number,boolean:     

const [count,setCount]=useState("count")

const [count,setCount]=useState(0)

const [count,setCount]=useState(false)

setCount("newCount") //string类型

setCount(count+1)    //number类型

setCount(true)       //boolean类型

2.数组:

数组	避免使用 (会改变原始数组)	推荐使用 (会返回一个新数组）
添加元素	`push`，`unshift`	`concat`，`[...arr]` 展开语法
删除元素	`pop`，`shift`，`splice`	`filter`，`slice`
替换元素	`splice`，`arr[i] = ...` 赋值	`map`
排序	`reverse`，`sort`	先将数组复制一份

import { useState } from 'react'

//类型: Array:     

const [count,setCount]=useState([1,2,3,4])

//删除:  删除数组中为1的选项

setCount(()=>count.filter(item => item !== 1))   

//更改:  数组中为1的选项更改为2

 setCount(() => count.map(item => {
          if (item === 1) {
                return 2
            } else {
                return item
            }}))

//添加 :添加 5

 setCount(() => [...count, 5])//末尾   setCount(() => [5,...count])  //开头

//排序

 const nextCount = [...Count];

 nextCount.reverse();
 
 setCount(nextCount)

3.对象:

import { useState } from 'react'

//类型: Object:     

const [count,setCount]=useState({
        id: 1,
        name: '小明',
        sex: '男'
    })

setCount({ ...count,name: '小红' })

setCount({ ...count, name: '小红', sex: '女'})