React Hooks

React Hooks

Hooks 是 React 16.8 版本中引入的新特性。它允许你无需编写类即可使用状态和其他 React 特性。Hooks 是函数组件中“挂钩”到 React 状态和生命周期特性的函数。它不能在类内部使用。Hooks
向后兼容，这意味着它不包含任何破坏性变更。此外，它也不会取代你对 React 概念的理解。

钩子背后的动机

Hooks 可以解决各种各样的问题。Hooks 还有助于降低组件的复杂性。任何应用程序最常见的特性之一就是状态（states）。状态是 React 用来表示组件当前状态信息的普通 JavaScript 对象。它在组件内部进行管理（就像在函数中声明的任何变量一样）。在
Hooks 出现之前，如果我们想要维护状态，就需要实现带有状态的类组件。维护带有状态的类组件始终是一个繁琐的过程，因为它需要编写更多代码，需要记住语法等等。React 文档中曾用一句话来解释这一点。

阶级划分既让人困惑，也让机器感到困惑。

当我们使用带有状态的类组件时，逻辑与类紧密耦合，很难重用这些类组件，而且使用类时代码组织起来也比较困难。类及其状态和其他类成员都需要使用 `@State` 关键字“this”。因此，理解这个关键字对于类的使用至关重要。实际上，这个关键字在 JavaScript 中比较容易让人困惑，我们需要理解它在 JavaScript 中的工作方式，这与大多数语言中的工作方式截然不同。此外，我们还需要记住绑定事件处理程序。

在继续讨论 Hooks 之前，请注意以下几点：
Hooks 完全是可选的——我们可以在几个组件中编写 Hooks，而无需重写现有代码。100
% 向后兼容。Hooks 不包含任何破坏性变更。

为什么我们应该选择使用 React Hooks

在 Hooks 出现之前，函数式组件只有 props。它会渲染 props 中的值。
让我们考虑以下场景，我们需要打印用户的姓名：

不使用 Hooks 的功能组件

export function PrintName(props) 
{
    return (
        <div> 
            <h1> Name: {props.name} </h1>
        </div>
     );
}

具有生命周期方法的类组件 - componentDidMount

import React from 'react';
class PrintName extends React.Component {

    state = {
        names: [],
    };

    async componentDidMount() {
        try {
            const res = await fetch("/api/data");
            this.setState({ names: await res.json() })
        } catch (e) {
            console.error(e);
        }
    }

    render() {
        return <h1> Hello {this.state.names[0]} </h1>;
    }
}

让我们使用 useEffect Hook 将 PrintName 组件从类组件重构为函数组件。

import React, { useEffect, useState } from 'react';
function PrintName() {
    const [names, setNames] = useState([]);

    useEffect(() => {
        fetch("/api/data").then(
            res => setNames(res.data)
        )
    }, []);

    return (
        <>
            <div>Hello {names[0]}</div>
        </>
    )
}

从上面的例子我们可以看出，当我们使用没有钩子的函数组件时，它们能做的事情不多，它们只是打印在 props 中接收到的值。

使用类组件时，我们发现它们更加灵活，可以通过实现生命周期方法（例如 `on` 和 `on`）来引入动态特性componentDidMount。但我们也注意到，为了在类组件中实现动态特性，需要编写更多代码。此外，正如我们在上一节中讨论的，我们需要编写繁琐的代码来维护类组件中的状态。为了实现状态管理和动态特性而进行的更改引入了复杂性，同时也使类组件变得更加僵化（无法重用或分离逻辑）。

最后，当我们使用 Hook 重构同一个函数组件示例时useEffect，只需极少的代码改动即可轻松实现相同的输出，而不会增加任何复杂性。
何时使用 Hook？
如果您编写了一个函数组件，然后想要为其添加一些状态，以前您需要将其转换为类。但现在，您可以在现有的函数组件中使用 Hook 来实现。

钩子的规则

Hooks 与 `<script>` 类似JavaScript functions，但使用时需要遵循以下两条规则。Hooks 规则确保state-full组件中的所有逻辑在其源代码中可见。这两条规则是：
1. 仅在顶层调用 Hooks。
不要在 `<script>` loops、conditions`<script>` 或 `<script> nested functions` 内部调用 Hooks。Hooks 应该始终在 React 函数的 `<script>` 部分使用top level。这条规则确保每次组件渲染时 Hooks 的调用顺序都相同。2
. 仅在 React 函数中调用 Hooks
。不能从普通的 JavaScript 函数中调用 Hooks。但是，可以从 React 函数组件中调用 Hooks。Hooks 也可以从自定义 Hooks 中调用。

React Hooks 的先决条件：
Node 版本 6 或更高版本；
NPM 版本 5.2 或更高版本

Hook 状态
Hook 状态是 React 应用中声明状态的新方式。Hook 使用useState函数式组件来设置和获取状态。Hook
效应
Hook 允许我们side effects在函数式组件中执行操作。它不使用类组件中可用的组件生命周期方法。换句话说，效应 Hook 等同于 `setState` componentDidMount()、componentDidUpdate()`setState` 和componentWillUnmount()`setState` 生命周期方法。

副作用具有大多数 Web 应用程序都需要执行的常见功能，例如：
更新 DOM、
从服务器 API 获取和使用数据、
设置订阅等。
在 React 组件中，副作用分为两种类型：
无清理副作用
和有清理副作用。

自定义 Hook
是一种 JavaScript 函数。自定义 Hook 的名称以 `_` 开头，"use"它可以调用其他 Hook。自定义 Hook 与普通函数类似，名称"use"开头的 `_` 表示该函数遵循 Hook 的规则。构建自定义 Hook 可以将组件逻辑提取到可重用的函数中。

内置 Hooks
这里我们将介绍 React 内置 Hooks 的 API。内置 Hooks 可以分为两部分，如下所示：
基本 Hooks：
useState、
useEffect
、useContext ；
附加 Hooks
：useReducer、
useCallback、
useMemo、
useRef、
useImperativeHandle、
useLayoutEffect、
useDebugValue

参考资料
：https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/docs/hooks-overview.html
https://blog.bitsrc.io/6-reasons-to-use-react-hooks-instead-of-classes-7e3ee745fe04