React Hooks学习手册

本文预计对常用hook做进一步的分析，同时增加示例。

• 一个简单的Hook示例
  • 什么是Hook?
  • 为什么要使用Hook？

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

一个简单的Hook示例

首先，这是一个传统的简单的有状态组件：

class Example extends React.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>
    );
  }
}

使用Hook后：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

看起来简单了不少，Example变成了一个函数，但这个函数拥有自己的状态（count），而且还可以更新自己的状态（setCount）。这个函数的酷炫之处就在与注入了一个hook——useState。

除了useState这个hook外，还有很`多别的hook，比如useEffect提供了类似于componentDidMount等生命周期钩子的功能，useContex提供了上下文（context）的功能等等。

什么是Hook？

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

“Hook 是一些可以让你在函数组件里‘钩入’ React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。”
根据官方文档解释，简单来说，Hooks本质上就是一类特殊的函数，它们可以为你的函数型组件（function component）注入一些特殊的功能。这些hooks的目标就是让你不再写class，让function一统江湖。

为什么要使用Hook？

1. 复用有状态组件太难了
   即使render props或高阶组件可以提供解决方案，但也会使得组件层级嵌套过深，而Hook没有多余的层级嵌套，只需把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。

2. 生命周期中的逻辑太混乱
   我们通常希望一个函数只做一件事情，但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据，绑定一些事件监听等等。同时，有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后，这一块的代码也变得不那么直观，同时也给测试工作带来挑战。

3. class太让人困惑了
   我们用class来创建react组件时，还有一件很麻烦的事情，就是this的指向问题。为了保证this的指向正确，我们要经常写这样的代码：this.handleClick = this.handleClick.bind(this)，或者是这样的代码：<button onClick={() => this.handleClick(e)}>。一旦我们不小心忘了绑定this，各种bug就随之而来，非常麻烦。同时，我们会尽可能的把组件写成无状态组件的形式，因为它们更方便复用，可独立测试。然而很多时候，我们用function写了一个简洁完美的无状态组件，后来因为需求变动这个组件必须得有自己的state，我们又得很麻烦的把function改成class。
   ——未完待续——