React Hooks 是一种特殊的函数，它可以让你拿到 React 中的很多特性：state、生命周期 等等。 在一些 React 的函数组件中，比如：

function Example (props) {
    return <div />;
}

我们可能更习惯叫它 “无状态组件”，因为它没有内部状态（state），也没有生命周期函数。一般如果我们要做一个轻量的组件，只用来渲染数据，不包含自身的 state ，那么我们可以选择函数式组件，它可以给我们带来更好的性能。

一旦我们需要维护组件自身的 state 或是生命周期方法，函数式组件就不能很好的胜任了。我们会选择 class 组件。

我们还是拿最简单的计数器🌰看下：

我们先写一个 class 组件：

class Number extends React.component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick (e) {
        this.setState({
            count: this.state.count + 1
        })
    }

    render () {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>
                    Click me ~
                </button>
            </div>
        )
    }
}

很简单，当我们点一下按钮数字就会加一。

有了 React Hooks 的帮助，我们也可以在函数组件中实现这样的功能。React Hooks 中内置了一个 useState Hook，React 允许我们使用它在函数式组件中使用 state：

import React, { useState } from 'react';

function Number () {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>
                Click me ~
            </button>
        </div>
    )
}

我们用这样一个函数式组件完成了相同的功能。

我们先从 react 中引入了 useState 这个 Hook，然后使用它初始化这个组件的 state ，useState 接受一个初始值参数，我们使用它初始化 state，然后使用结构赋值拿到 count 和 setCount，setCount 可以改变 count。当我们想要读取的时候，直接用 count 即可。

如果我们还需要其他 state 的话，直接定义即可：

    const [food, setFood] = useState('🍔')
    const [drink, setDrink] = useState('🍺')
    // ......

所以在之前如果我们编写函数式组件的时候需要使用 state，那么我们会将它转换为 class 组件，现在我们可以在现有的函数式组件中使用 Hook 完成。

React 内置了很多种 Hook 提供不同的功能，我们可以按需选用。除此之外，React 还支持自定义 Hook 。