Hooks的使用规则：
只能在函数组件的顶级作用域使用；只能在行数组件或者其他Hooks中使用。
1. 只能在函数组件的顶级作用域使用
所谓顶层作用域，就是Hooks不能在循环、条件判断、嵌套函数内执行，而必须是在顶层。
同时Hooks在组件的多次渲染直接，必须按顺序被执行。因为在React组件内容，其实是维护了一个对应组件的固定Hooks执行列表的，以便在多次渲染之间保持Hooks的状态，并做对比。
所有的Hook必须要被执行到，必须按顺序执行。
2. Hooks只能在函数组件或者是其他的Hooks中使用。
useState：让函数组件具有维护状态的能力。
用法：
1. useState(initialState) 的参数 是创建state的初始值，可以是任意类型。
2. useState()的返回值是一个有两个元素的数组，第一个数组元素用来读取state的值，第二个是用来设置这个state的值。
3. 可以多次调用useState,创建多个state。
1. 什么样的值应该保存在state中?
遵循一个原则：state中永远不要保存可以通过计算得到的值。
useEffect: 执行副作用
副作用就是指一段和当前执行结果无关的代码。
useEffect中代码的执行是不影响渲染出来的UI的。
具体用法：
useEffect(callback, dependencies)
第一个为要执行的函数 callback，第二个是可选的依赖项数组 dependencies。其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行
useEffect 还有两个特殊的用法：没有依赖项，以及依赖项作为空数组。
1. 没有依赖项，则每次 render 后都会重新执行。
2. 空数组作为依赖项，则只在首次执行时触发，对应到 Class 组件就是 componentDidMount。
useEffect 还允许你返回一个函数，用于在组件销毁的时候做一些清理的操作。
useEffect 在下面四种时机去执行一个回调函数产生副作用：
1. 每次 render 后执行：不提供第二个依赖项参数。比如useEffect(() => {})。
2. 仅第一次 render 后执行：提供一个空数组作为依赖项。比如useEffect(() => {}, [])。
3. 第一次以及依赖项发生变化后执行：提供依赖项数组。比如useEffect(() => {}, [deps])。
4. 组件 unmount 后执行：返回一个回调函数。比如useEffect() => { return () => {} }, [])。
定义依赖性注意：
1. 依赖项中定义的变量一定是会在回调函数中用到的，否则声明依赖项其实是没有意义的。
2. 依赖项一般是一个常量数组，而不是一个变量。因为一般在创建 callback 的时候，你其实非常清楚其中要用到哪些依赖项了。
3. React 会使用浅比较来对比依赖项是否发生了变化，所以要特别注意数组或者对象类型。如果你是每次创建一个新对象，即使和之前的值是等价的，也会被认为是依赖项发生了变化。
