useState()

函数式组件通过使用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>
    )
}