React Hook 是 React 16.8 引入的新特性。它用在函数组件中，允许开发者不使用 class 的情况下，使用状态 state 和其他特性。

Hook，使开发者可以在函数组件中使用状态，在无需修改组件结构的情况下复用状态逻辑。

Hook 是一些可以在函数组件里“钩入” React state 及生命周期等特性的函数，在编写函数组件需要向其添加一些 state 时，就可以使用 Hook。本质上就是一类特殊的函数，为函数型组件（function component）注入一些特殊的功能。
Hook 不能在 class 组件中使用。

最常见的 Hooks，比如 setState 和 useEffect。

State Hook

useState 是 React 提供的一个内置 Hook。在函数组件里调用useState可以给组件添加一些内部 state。

React 在重复渲染时会保留这个 state。

useState 返回一对值：

（1）当前状态
（2）更新它的函数

在事件处理函数中或其他一些地方调用这个函数，类似于 class 类组件的 this.setState，但是这个更新函数不会把新的 state 和旧的 state 进行合并。

useState 唯一的参数就是初始 state。

上面的例子中，计数器从零开始，初始 state 是 0。

这里的 state 不一定是一个对象，它不同于 this.state，这个初始 state 参数只有在第一次渲染时会被用到。

Example.js：

import React, { useState } from 'react' // 引入 React 中的 useState Hook,在函数组件中存储内部 state。
function Example () {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0) 
  // 调用 useState Hook 声明一个新的 state 变量,它返回一对值给到我们命名的变量上。变量命名为 count，存储点击次数。传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值是一个函数 setCount，通过它来更新 count 的值。
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> 
      // 点击按钮，触发点击事件，传递一个新的值给 setCount，React 重新渲染 Example 组件，并把最新的 count 传给它。
        Click me
      </button>
    </div>
  );
}
export default Example

App.js 中引用这个组件：

// import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from './components/Home'
import Example from './components/Example';

function App () {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          文字 <code>src/App.js</code> Hello World!.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          https://reactjs.org
        </a>
      </header>
      <Home />
      <Example />
    </div>
  );
}

export default App;

上面的例子等同于：

import React, { Component } from 'react'
class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render () {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
export default Example

页面效果：

使用多个 state 变量

import React, { useState } from 'react'
function Example () {
  const [count, setCount] = useState(0)
  const [age, setAge] = useState(42)
  const [fruit, setFruit] = useState('banana');
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>

      <p>setAge： {age} </p>
      <button onClick={() => setAge(age + 3)}>
        Click me
      </button>

      <p>setFruit：{fruit} </p>
      <button onClick={() => setFruit('apple')}>
        Click me
      </button>
    </div>
  )
}
export default Example

页面效果如下：

注意：Hook 比普通函数更为严格。只能在组件（或其他 Hook）的 顶层 调用 Hook。如果想在一个条件或循环中使用 useState，需要提取一个新的组件并在组件内部使用它。