Hook来替代class组件的写法

Hook的出现就是为了解决组件的复用问题

useState 初始化值 和 设置函数

useEffect 每次渲染后都执行

案例

import React, { useState, useEffect } from 'react'
// FunctionComponent 跟 Component 差别需要进行判断
// 因为不在class、所以方便很多
const LikeButton: React.FunctionComponent = () => {
    const [like, setLike] = useState(0); 
    // like 是 0
    // setLike 是事件
    return (
        <div>
            <h1>{like}</h1>
            <button onClick={ ()=>{ setLike(like + 1)}}>
                Like + 1
            </button>
        </div>
    )
};



export default  LikeButton