1.函数式组件结合hook实现

/**
 * 函数式组件，其实就是导出一个构造函数，把一个函数当成一个组件
 * 函数式组件：
 * 1.没有生命周期
 * 2.没有状态
 * 3.没有this
 * 函数式组件通常使用需要结合hook实现
 * 函数式组件快捷键rfc
 */
import { useState } from 'react'
//一种写法
// function App2() { 
    //二种写法
    const App2 = () => {
    //所有hook都不能写在条件判断语句中
    // const [变量名，修改变量的方法]=useState(变量初始值)
    const [num, setNum] = useState(0)
    /* 二种写法 */
    const handleClickFn=()=> {
        setNum(num+1)
    }
    //setNum(新值) 用新值替换掉num旧值
    return (
        <>
            <h2>{num}</h2>
            {/* 一种写法 */}
            {/* <button onClick={()=>setNum(num+1)}>增加</button> */}
            {/* 二种写法 */}
            <button onClick={handleClickFn}>增加</button>
        </>
    )
}
export default App2