State Hook

State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态
让React的函数组件能够像类组件一样拥有state

useState函数有一个参数, 这个参数的值表示状态的默认值

在我们引入react的时候顺带先引入一下stateHook

import React, {
    useState } from 'react';

useState函数的返回值是一个数组, 该数组一定包含两项

• 数组的第一项为状态的值
• 数组的第二项是函数

useState的基本使用方法如下

import React, {
    useState } from 'react';

export default function App(props) {
   
    // 在函数组件中state可以是一个原始类型
    // 使用一个状态, 该状态的默认值是0, 调用useState后返回一个数组
    // 数组的第一项是默认值, 数组的第二项是一个函数用来改变这个state
    const arr = useState(0);
    const number = arr[0];
    const setNumber = arr[1];
    return (
        <div>
            {
   /* 点击了按钮以后调用setNumber, setNumber接收一个参数就是要将number改变为何值 */}
            <span onClick = {
    () => {
    setNumber(number + 1) } }> + </span>
            <span>{
    number }</span>
            <span onClick = {
    () => {
    setNumber(number - 1) } }> - </span>
        </div>