React的Hook让函数组件拥有class组件的特性

一、解决了什么问题？

Hook 是以 use 开头的特殊函数（useState、useEffect等），只能在 函数组件 内部使用。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。譬如 useState 就等同于 class组件中的state对象。

1、库的更新说明

Hook是React 16.8 新增特性， 在以下模块中包含了 React Hook 的稳定实现：

React DOM
React Native
React DOM Server
React Test Renderer
React Shallow Renderer

React Native 0.59 及以上版本支持 Hook。

请注意，要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package，Hook 将无法运行。

---

二、Hook 规则与插件

1、规则

• Hook只能用在React 的函数组件和自定义Hook中。
• Hook只能在函数最外层调用 ，在循环、条件判断或者子函数中调用都是不允许的。

2、插件

eslint-plugin-react-hooks 用于检查Hook代码是否符合规则的插件。

npm install eslint-plugin-react-hooks

3、插件链接：

• eslint-plugin-react-hooks

我们推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

---

三、State Hook

State Hook 就是指 useState 这个特殊函数，让你不用编写class，就可以使用state特性，换言之就是让 函数组件 拥有 state 特性。详细用法，看这里！

---

四、Effect Hook

Effect Hook 就是指 useEffect 这个特殊函数，它让 函数组件 能在组件渲染完成后执行自定义操作。详细用法，看这里！

---

五、自定义Hook

自定义 Hook 是一个以 use 开头的自定义函数，其内部可以调用 Hook。

1、自定义Hook

import {
    useState, useEffect } from 'react';

function useFriendStatus(friendID) {
   
    const [isOnline, setIsOnline