React 组件的三大核心属性之 state 在函数式组件中的基本使用

使用Hook可以在函数式组件中使用state

import React, {useState} from 'react'
import {Button} from "antd";

export default function FuncCompDemo(props) {

    const initCount = 0;
    /**
     * @param 初值
     * @return 数据和修改数据的function
     */ 
    const [count, setCount] = useState(initCount)

    function incr() {
        /**
         * 修改count, 使用方式二
         * @param 修改后的值
         */
        setCount(count + 1)
    }

    function decr() {
        /**
         * 修改count, 使用方式二
         * @param 一个函数，修改后的值
         */
        setCount(value => value - 1)
    }

    return (
        <div>
            <h1>数值为: {count}</h1>
            <Button onClick={incr} type="primary"> +1 </Button><br/>
            <Button onClick={decr} type="primary"> -1 </Button>
        </div>
    )

}