React Hooks
Hook 是能让你在函数组件中“钩入” React 特性的函数。
State Hook
useState 不能存在于条件判断语句中，是按照顺序记忆的Hook 在 class 内部是不起作用的，但是可以使用 hook 取代 class在函数组件中，没有 this，所以不能分配和读取 this.state，直接调用 useState Hook
import React
, { useState
} from 'react';
function example() {
const [count
, setCount
] = useState('apple');
return (
<p
>want an
{count
}</p
>
)
}
定义 state 变量的时候，等号左边的名字并不是 React API 的部分，可以自己取名字。这种 JS 语法叫做数组解构。它意味着我们同时创建了 count 和 setCount 两个变量, count 的值为 useState 返回的第一个值, setCount 是返回的第二个值。它等价于下面代码：
var fruitStateVariable
= useState(0)
var count
= fruitStateVariable
[0]
var setCount
= fruitStateVariable
[1]
使用 hook 存储多个不同的变量，就需要调用 useState() 多次。可以同时给不同的 state 变量去不同的名称，并且可以单独更新它们。
function ExampleWithManyStates() {
const [age
, setAge
] = useState(42);
const [fruit
, setFruit
] = useState('banana');
const [todos
, setTodos
] = useState([{ text
: '学习 Hook' }]);
function handleOrangeClick() {
setFruit('orange');
}
Effect Hook
Effect Hook 可以让你在函数组件中执行副作用操作
Effect Hook 可以看做是 componentDidMount, componentDidUpdate, componentWillMount 这三个 React class 生命周期函数的组合React 组件中有两种副作用操作：需要清除的和不需要清除的。React 会保存我们传递的 effect 函数，并且在执行**首次 DOM 渲染 (componentDidMount)和每次更新导致的重新渲染 (componentDidUpdate)**都会调用它。传递给 useEffect 的函数在每次渲染中都会有所不同，因为每次重新渲染，都会给你新的 effect，替换掉之前的。使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这会让应用看起来更快。而之前的 componentDidMount 或 componentDidUpdate 则是同步执行的
React 的清除机制
在 class 中，通常会在 componentDidMount 中设置订阅，并在 componentDidWillUnmount 中清除它effect 中返回一个函数，是 effect 可选的清除机制，每个 effect 都可以返回一个清除函数。React 会在组件卸载的时候执行清除操作。
useEffect(() => {
document
.title
= `You clicked ${count} times`
}, [count
]);
这里有一点需要重视，componentWillUnmount 只会在组件被销毁前执行一次，而 useEffect 里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。 useEffect 接受第二个数组类型的参数，仅有在数组中变量发生改变时，才会重新订阅。如果想执行只运行一次的 effect, 也就是说仅在组件挂载（componentDidMount）和卸载（componentWillUnmount时执行），可以传递一个空数组（[]）作为第二个参数。不过这种用法可能带来 bug，少用。
其他的 Effect Hooks
除了上文介绍的 useState 和 useEffect，react 还给我们提供了很多有用的 Hooks： useContext useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect
Hook 规则
只在最顶层使用 Hook，不要在循环、条件或嵌套函数中调用 Hook。这样就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。旨在 React 函数中调用 Hook，不要再普通的 JavaScript 函数中调用 Hook。
自定义 Effect Hooks
将服用的逻辑抽离出来，哪个组件要用，就在哪个组件里面使用
自定义 Hook 是一个函数，其名称必须以 “use” 开头，函数内部可以调用其他的 Hook。在两个组件中使用相同的 Hook 不会共享 state。自定义 Hook 是一种重用状态逻辑的机制（例如设置为订阅并存储当前值），所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。
