面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！
目录
Hook小结
什么是Hook?
答：Hook是React 16.8（包括react-dom 16.8）新增的特性，它可以让你在不编写class的情况下使用state及其它的React特性，Hook是一个特殊的函数。
Hook API
- useState - 用来初始化state参数。
- useEffect
- 看做是componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。
- 它在第一次渲染之后和每次更新之后都会执行；同一个函数组件中可以同时出现多个useEffect，React将按照useEffect声明的顺序依次调用组件中的每一个effect。
- 当传递的第二个参数为空数组时候执行一次，当传参为依赖项时候，每当数据更新，都会执行。
- useContext - 配合Provider，实现跨层级传值。
- useReducer - 是useState的替代方案。
- useRef
- useRef 返回一个可变的 ref 对象，其
.current属性被初始化为传入的参initValue。 - 返回的 ref 对象在组件的整个生命周期内保持不变。
- useRef 返回一个可变的 ref 对象，其
- useCallback - 该回调函数仅在某个依赖项发生改变时才会更新。
- useMemo - 接收一个自定义的函数和数组参数，仅在某个数组参数发生改变时才返回值并触发render，这种优化有助于避免在每次渲染时都进行高开销的计算。
- useLayoutEffect - useLayoutEffect的执行先于useEffect。
- useImperativeHandle - useImperativeHandle可以让你在使用ref时将自定义的实例值暴露给父组件，应尽量避免使用ref，useImperativeHandle应当与forwardRef一起使用。
- useDebugValue - debug
自定义 Hook
自定义Hook可以让组件之间复用一些状态逻辑，在class方式下通常采用高阶组件来实现，而自定义Hook可以让我们在不增加组件的情况下达到同样的目的。
import React, { useState } from 'react';
function useChangeCount(init){
// 自定义hook，名字必须以use开头
const [count, setCount] = useState(init);
const plus = () => {
setCount(count + 1);
}
const minus = () => {
setCount(count - 1);
};
const reset = () => {
setCount(init);
};
return [count, {plus, minus, reset}];
}
function SelfHook(){
const [count, setCount] = useChangeCount(0);
return (
<div>
<p>当前count: {count}</p>
<div><button onClick={setCount.plus}>增加</button></div>
<div><button onClick={setCount.minus}>减少</button></div>
<div><button onClick={setCount.reset}>重置</button></div>
</div>
)
}
export default SelfHook;
