State Hook

useState

useState是一个Hook，它本质上是一个函数，这个函数可以用来定义组件的state变量。

useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。

useState返回值为：当前 state 以及更新 state 的函数。

xxxxxxxxxx
import React, { useState } from 'react'

export default function Counter() {
    // 声明一个叫 “count” 的 state 变量。useState返回一个数组
    const [count, setCount] = useState(0)
    return (
        <div>
            我是使用hook的组件<br />
            <button onClick={()=> setCount(count+1)}>变量</button>
            <h3>数量：{count}</h3>
        </div>
    )
}

多个state变量

xxxxxxxxxx
import React, { useState } from 'react'

export default function Counter() {
    // 声明一个叫 “count” 的 state 变量。useState返回一个数组
    const [count, setCount] = useState(0)
    //声明叫做color的state变量
    const [color, setColor] = useState('red')

    return (
        <div>
            我是使用hook的组件
            <br />
            <button onClick={()=> setCount(count+1)}>变量</button>
            <button onClick={()=> setColor('blue')}>变色</button>
            <h3 style={{color}}>数量：{count}</h3>
        </div>
    )
}

实时效果反馈

1. 使用___来定义state变量：

A createState()

B usestate()

C useState()

D useStates()

答案

1=>C