mikumikugo

博客园 首页 新随笔 联系 订阅 管理

函数式组件通过使用useState()可以创建自己的状态

使用:

1、首先从React中引入useState

2、const [state,setState] = useState(initialState),useState的返回值是一个数组,包含两个值,第一个是所定义的状态,第二个是设置状态的函数,相当于类组件里的setState(),useState()传入一个参数,这个参数作为初始状态存到state中,如果传入的是一个回调函数 useState((value)=>value),那么该回调函数会传入一个值,这个值永远都是这次更新前的那个状态值,因此如果该操作是异步的,那么两种方式的结果可能会有所不同

3、后续要用到状态里的数据就直接调用state变量就行了,要对状态进行修改,调用setState()函数就行

注意:[]里面定义的变量名和函数名并不固定,可根据需要自己命名,如以下案例中我点击按钮后将输入框里的值维护到状态里,实现改名的操作,所以我定义的就是[name,setname]

 

import React, { useState, useRef } from 'react'

export default function UseState() {
    const [name, setname] = useState('xiaohuang')
    const myref = useRef()
    return (
        <div>{name}
            <input type='text' ref={myref} />
            <button onClick={() =>
                setname(myref.current.value)
            }>改名</button>
        </div>
    )
}

 

posted on 2022-02-16 17:56  mikumikugo  阅读(901)  评论(0编辑  收藏  举报