| Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 |
一、Hook简介
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。但class组件并未放弃，你可以在应用中同时使用class组件和函数组件。hook的最终目的是用来实现所有calss组件的功能。
Hook有一个很棒的作用，可以将一个异步操作使用use hook的形式同步写出来。你只需要使用hook即可，当它变化时会自动刷新组件。
二、Hook预览
2.1 简要介绍
Hook是一些可以让你在函数组件里“钩入” React state及生命周期等特性的函数，平常使用的有：
- state hook 在函数组件中使用状态，可以有任意数量的state（状态）
- effect hook 副作用hook，主要是根据依赖变化进行计算或者刷新显示，事件监听也在这里。
2.2 Hook使用规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件和自定义的Hook中调用Hook。不要在其他JavaScript 函数中调用。
2.3 自定义 Hook
有时候我们会想要在组件之间重用一些状态逻辑。目前为止，有两种主流方案来解决这个问题：高阶组件和 render props。自定义Hook可以让你在不增加组件的情况下达到同样的目的。
2.4 其它Hook
- useContent 用来在多个无明显关系组件之间共享状态，不需要通过一级级的属性传递。
- useReducer 用来处理具有复杂状态时的state。
三、State Hook
state的初始值只在第一次渲染时调用，不像 class 中的 this.setState，更新state变量总时是替换它而不是合并它。
四、Effect Hook
4.1 effect hook介绍
effect发生在“渲染之后”这种概念，某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect “属于”一次特定的渲染。每个effect 都可以返回一个清除函数。
4.2 使用Effect Hook的提示
- 使用多个effect hook 实现关注点分离
- 通过跳过effect hook进行性能优化（使用依赖项）
五、使用Hook规则
- 只能在最顶层使用hook(不要在循环，条件或嵌套函数中调用 Hook)，这样保证了hook调用顺序的固定性
- 只能在React函数中调用hook(不要在普通的 JavaScript 函数中调用 Hook)
六、自定义Hook
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。它的参数和返回值是任意的。它就像一个正常的函数，但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。
- 自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。
- 自定义 Hook 必须以 “use” 开头吗?必须如此。这个约定非常重要。
- 在两个组件中使用相同的 Hook 会共享 state 吗?不会。
- 使用useReducer来管理复杂state
七、Hook Api
Hook 一览：
- useState 状态hook。
- useEffect 副作用hook。
- useContent 接收一个Context 对象（React.createContext 的返回值）并返回该context的当前值。
- useReducer useState的替代方案。
- useCallback 返回一个memoized 回调函数。
- useMemo 返回一个memoized 值。
useCallback(fn, deps)相当于useMemo(() => fn, deps)。 - useRef 返回一个可变ref对象，当 ref 对象内容发生变化时，我们并不会得到通知。变更
.current属性不会引发组件重新渲染。 - useImperativeHandle 和forwardRef配合使用，不常用。
- useLayoutEffect 同步调用effect，不常用。
- useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。
八、Hook问答
略
Hook是很强大的功能，现在流行组件均改写为hook，务必掌握。
官方文档（中文版）：https://react.docschina.org/docs/hooks-intro.html
欢迎大家留言指正错误或者提出宝贵意见。
