Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state，一般搭配函数式组件使用。

在React 16.8之前，函数式组件只能作为无状态组件（只读组件），即不能进行状态管理。

Hooks简单举例：

useState简单举例

常用hooks介绍

useState（） hooks状态钩子

搭配函数式组件，主要是可以进行组件的状态管理，好处是不像传统state需要注意this指向（函数式组件中没有this）。

一般用法 const [ a , setA  ] = useState(初始值)

a表示组件需要声明的变量a，setA允许你在组件其它的位置对a的数据进行改变setA（2），即a的值将为2

一个组件中可以声明多个useState（）

useEffect（）hooks副作用钩子

uesEffect（）可以与class组件中的三个周期函数作用相同，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

document的title使用useEffect（）

我们运行代码发现，title的You clicked ${count} times count有初始值随着点击值增加，即如果要在class组件中实现的话则需要2个周期函数componentDidMount和componentDidUpdate

默认情况下，它在第一次渲染之后和每次更新之后都会执行。

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。

如何控制useEffect（）

  useEffect(() => { });，当为此形式时，相当于componentDidMount和componentDidUpdate，即相关数据每一次更新刷新界面都将调用useEffect（）， useEffect(() => { }，[ ]);为此形式时，相当于componentDidMount，只在页面挂载时执行一次，相关数据改变时不重新调用useEffect（）； useEffect(() => { }，[ count ]);相当于componentDidMount和componentDidUpdate，但是注意这里只会在count变化时重新调用useEffect（）；

useEffect(() => { 

 需要在组件销毁时清除的数据或者方法等 ；

return function clearn（{

需要在组件销毁时清除的数据或者方法等

}）  }，);

返回箭头函数同样可以在组件销毁时清除

此时相当于componentDidMount和componentDidUpdate和componentDidUnmount

其他的Hook（具体参考react hooks官方文档，这里简单介绍一下作用及用法）

useContext（）  获取context 对象  用法：const value = useContext(MyContext);

useCallback（） 缓存回调函数，避免传入的回调每次都是新的函数实例化而导致依赖组件重新渲染；用法：const memoizedCallback = useCallback(()=>{doSomething(a,b);},[a,b],);把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新；

useMemo（）缓存每次传入的props，避免依赖的组件每次都重新渲染；用法：const memoizedValue = useMemo (()=>computeExpensiveValue(a,b),[a,b]);把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。

useRef（） 返回一个可变的 ref 对象，获取组件的真实节点；用法：const refContainer = useRef(initialValue);

自定义 Hook(详细参考react hooks官方文档)

提取自定义 Hook

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。