hooks 的使用规则
注意：React Hooks 只能直接出现在 函数组件 中，不能嵌套在 if/for/其他函数中！
否则就会报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render
React 的 useState 这个 Hook 被条件性（放在一个条件判断中）的调用了。
React Hooks 必须要每次组件渲染时，按照相同的顺序来调用所有的 Hooks。
- 为什么会有这样的规则？ 因为 React 是按照 Hooks 的调用顺序来识别每一个 Hook，如果每次调用的顺序不同，导致 React 无法知道是哪一个 Hook
useEffect Hook
- side effect - 副作用
- useEffect 的基本使用
- useEffect 的依赖
- useEffect 发送请求
side effect - 副作用
使用场景：当你想要在函数组件中，处理副作用（side effect）时，就要使用 useEffect Hook 了 作用：处理函数组件中的副作用（side effect）
问题：副作用（side effect）是什么? 回答：在计算机科学中，如果一个函数或其他操作修改了其局部环境之外的状态变量值，那么它就被称为有副作用 类比，对于 999 感冒灵感冒药来说：
- （主）作用：用于感冒引起的头痛，发热，鼻塞，流涕，咽痛等
- 副作用：可见困倦、嗜睡、口渴、虚弱感
理解：副作用是相对于主作用来说的，一个功能（比如，函数）除了主作用，其他的作用就是副作用 对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）
React 组件的公式：UI = f(state)
常见的副作用（side effect）
- 数据（Ajax）请求、手动修改 DOM、localStorage 操作等
useEffect 的基本使用
使用场景：当你想要在函数组件中，处理副作用（side effect）时，就要使用 useEffect Hook 了 作用：处理函数组件中的副作用（side effect） 注意：在实际开发中，副作用是不可避免的。因此，react 专门提供了 useEffect Hook 来处理函数组件中的副作用
import { useEffect } from 'react'
useEffect(function effect() {
document.title = `当前已点击 ${count} 次`
})
useEffect(() => {
document.title = `当前已点击 ${count} 次`
})
解释：
- 参数：回调函数（称为 effect），就是在该函数中写副作用代码
- 执行时机：该 effect 会在每次组件更新（DOM更新）后执行
useEffect 的依赖
- 问题：如果组件中有另外一个状态，另一个状态更新时，刚刚的 effect 回调，也会执行
- 性能优化：跳过不必要的执行，只在 count 变化时，才执行相应的 effect
useEffect(() => {
document.title = `当前已点击 ${count} 次`
}, [count])
解释：
- 第二个参数：可选的，可省略；也可以传一个数组，数组中的元素可以成为依赖项（deps）
- 该示例中表示：只有当 count 改变时，才会重新执行该 effect
