Hook 简介
Hook是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数， 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
举个例子：
const Example = (props) => {
// 你可以在这使用 Hook
return <div />;
}
hook使用规则
1.只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook，** 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
2.只在 React 函数中调用 Hook
3.Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。
一、优点
1.没有破坏性改动
完全可选
100%向后兼容
现在可用
2.Hook 不会影响你对 React 概念的理解。
3只是换成了相关的函数方式更好的组合实现了现有的api
4.解决在组件之间复用状态逻辑很难
react没有提供将可复用性行为“附加”到组件的途径，
高阶组件倒是可以但是容易形成嵌套地狱
renderprops 需要修改相应的组件结构
但是hook 可以自定义相关的hook 把公共的状态抽离出来，如果需要单元测试，测试函数比测试类好侧的多，相信我，历史教训😂
5.解决复杂组件变得难以理解
复杂的组件常常有许多的状态逻辑和副作用（你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”），我们都知道react calss 模式 ，有一些基本的生命周期，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。这也是所有的状态都堆在一起。难以测试。不清晰。
不可能将组件拆分的更小颗粒化
为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），这个时候就用到了 effect-hook
可以将不同的逻辑写在不同的effecthook中
- 难以理解的 class 这个相对的。
this的问题少了
7.趋势
二、常用的hook
1.useState-相当于class this.state
const [count, setCount] = useState(0);
前者当前状态和后者一个让你更新它的函数
你可以在一个组件中多次使用 State Hook
与class不同点
1）不同于 class 的是初始值我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象
2）但是它不会把新的 state 和旧的 state 进行合并。
你不必使用多个 state 变量。State 变量可以很好地存储对象和数组，因此，你仍然可以将相关数据分为一组。然而，不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。
3）更新 读取的时候比较方便 不需要this
class {this.state.count}
函数 {count}
4）如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
- 类似与vue的计算属性，如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
2.Effect Hook
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。（我们会在使用 Effect Hook 里展示对比 useEffect 和这些方法的例子。）
用法
1.可以通过return 清除相关的状态、副作用。
useEffect(() => {
return () => {
};
});
跟 useState 一样，你可以在组件中多次使用 useEffect 这个就可以将多个状态拆分成颗粒化。
React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
提示
与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。-
避免多次刷新
在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决：
这是很常见的需求，所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：
useEffect(() => {
document.title =You clicked ${count} times;
}, [count]); // 仅在 count 更改时更新特殊情况
（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。
useContext让你不使用组件嵌套就可以订阅 React 的 Context。
另外 useReducer 可以让你通过 reducer 来管理组件本地的复杂 state。
三自定义hook
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。
自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。
在两个组件中使用相同的 Hook 会共享 state 吗？不会。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。
