前言：HOOK作为React16.8的新增特性，相信绝大多数react开发者都已经了解或者上手过。本文希望通过对这些常用API的使用案例说明，和大家一起去深度解锁HOOK。
1、useState
const [state, setState] = useState(initState);
1.1、以上语句大家需要理解下，useState的返回值实际上是一个长度为2的数组，所以下面的写法也是可以的，只是为了代码的简洁性而使用了数组的解构赋值。
const fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
const fruit = fruitStateVariable[0]; // 数组里的第一个值
const setFruit = fruitStateVariable[1]; // 数组里的第二个值
注：所以参考useState的返回值，有时候我们在写公用方法的返回值时，Object在某些时候不一定是首选项，实际上数组更方便使用者去自定义接收的变量名。
1.2、在定时器或者接口的回调函数中，有时候受制于闭包环境的影响，我们无法去获取到state的最新状态。实际上在setState这个更新函数中，允许接收一个函数，这个函数的入参就是最新的state。
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(c => c + 1); // 此处的c就是最新的count
}, 1000);
}, []);
注：此处定时器的清除我们放在useEffect（2.1）里单独讲解。
1.3、initState在常见场景下，我们通常作为state的初始值来使用，当state的初始值过于复杂时，我们可能会依赖函数去处理。而这时候其实你应该明白，useState并非只能接收基础类型的数据，而且也支持函数的接收。
// 错误：
const initState = () => {
//...
return '';
};
const [state, setState] = useState(initState());
// 正确：
const [state, setState] = useState(initState);
注：错误示例中，useState接收的是initState函数返回的值，这样的写法会在组件每次更新（state或props更新时）都会触发initState函数的执行。正确的写法是在useState里传入函数，在这个函数里做复杂计算后返回你需要的初始值。
2、useEffect
componentDidMount, componentDidUpdate, componentWillUnmount：useEffect Hook 可以表达所有这些(包括 不那么 常见 的场景)的组合。
getSnapshotBeforeUpdate，componentDidCatch 以及 getDerivedStateFromError：目前还没有这些方法的 Hook 等价写法，但很快会被添加。
useEffect(() => {
//...
return () => {
//...
}
}, []);
2.1、useEffect的第一个参数为函数，每次useEffect触发时会执行这个函数，在这个函数中支持return出一个函数，通常我们会在这个副作用来模拟componentWillUnmount，⚠️但是请注意：这时候你应该用useEffect的第二个参数传入空数组去配合。
// 错误：
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
ref.current = setTimeout(() => setCount(c => c + 1), 1000);
return () => {
// 此处在每次count更新后都会触发执行
clearTimeout(ref.current)
};
}, [count]);
// 正确：
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
ref.current = setTimeout(() => setCount(c => c + 1), 1000);
}, [count]);
useEffect(() => {
return () => {
// 此处仅在组件销毁前执行
clearTimeout(ref.current)
};
}, []);
注：此处仅仅为demo需要，正常开发中setTimeout换成setInterval效果更佳。
参考如下：
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
ref.current = setInterval(() => setCount(c => c + 1), 1000);
return () => {
clearInterval(ref.current)
};
}, []);
2.2、useEffect的第二个参数为非必填值数组。当第二个参数不传时，组件每次更新（state或props更新时）都会触发第一个入参函数的执行，effect内部的props和state也会随之更新。
useEffect(() => {
// 此处在组件每次更新（state或props更新时）都会触发执行
// ...
});
2.3、当第二个参数传入空数组时，仅在组件挂载后触发第一个入参函数的执行，而且effect内部的props和state就会一直持有其初始值。
useEffect(() => {
// 此处仅在组件挂载后触发执行
// ...
}, []);
2.4、当第二个参数传入非空数组时，组件挂载后和数组内部参数更新后都会触发第一个入参函数的执行，且effect内部的props和state会随着监听值变化而更新。
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
// 每次count更新后，都会再次触发执行
ref.current = setTimeout(() => setCount(c => c + 1), 1000);
}, [count]);
注：实际上，useEffect的第二个参数数组的每项中，支持对Object的监听。这样在实际开发中，我们可以对部分关联性较强的state做统一化处理：
const [payload, setPayload] = useState({
searchKey: undefined,
type: undefined,
pageIndex: 1,
pageSize: 10,
// ...
});
useEffect(() => {
dispatch({ type: 'xxx', payload });
}, [payload]);
// 为了方便payload状态的更新，我们可以这样：
const updatePayload = (data) => setPayload((d) => ({ ...d, ...data }));
注：当state的状态过于复杂且包含多个值时，建议使用useReducer。
3、useRef
const ref = useRef(initialValue);
3.1、useRef返回一个可变的ref对象，其.current属性则为初始化时传入的参数initialValue。通常我们会用其获取dom元素，但是由于其内置属性.current是一个可变值的“盒子”，利用其整个生命周期都持续存在的特性，可以实现在class函数中this.timer的写法去保存某些值。（比如：定时器的序号）
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
ref.current = setInterval(() => setCount(c => c + 1), 1000);
return () => {
clearInterval(ref.current)
};
}, []);
注：若要将ref暴露给父元素，可以使用useImperativeHandle。
