React Hooks 简述

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？
——拥有了Hooks，生命周期钩子函数可以先丢一边了。

你在还在为组件中的this指向而晕头转向吗？
——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

import React from 'react';
import { Card, Button } from 'antd';

class Counter extends React.Component {

    state = {
        count: 0,
    }

    render() {
        const { count } = this.state;
        return (
            <Card>
                <p>您点击 {count} 次</p>
                <Button onClick={() => this.setState({ count: count + 1 })}>
                    Click me
                </Button>
            </Card>
        );
    }
}

export default Counter;

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

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <Card>
            <p>您点击 {count} 次</p>
            <Button onClick={() => setCount(count + 1)}>
                Click me
            </Button>
        </Card>
    );
}
export default Counter;