Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
什么是hooks
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React
- hooks没有破坏性
- 完全可选
- 100%向后兼容
- Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。Hook 还提供了一种更强大的方式来组合他们。
为什么使用hooks
在组件之间复用状态逻辑很难,
React没有提供组件直接提供组件复用的途径(React 没有提供将可复用性行为“附加”到组件的途径),通常我们是通过 render props 和 高阶组件实现,但事先你并不能预测所有要共用组件的地方,所以得重新组织结构,会很麻烦, 另外由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”组件复杂变的难以理解
组件是react的最小复用单元,组件的复杂度是随着需求在快速增长, 在各种生命周期中维护着不同的复杂逻辑,要搞清楚这个组件的功能实现,需要全部去阅读所有的代码.
这种逻辑散乱的组件,很难去拆封更小的组件,也为单元测试带来麻烦
3 . hooks 是渐进式的,它与现有的class共存,并且react没有移除class的计划
hooks 有自己的状态及生命周期特性
使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题
react不但内置了一些hooks,也允许我们自己创建hooks.
Hook 使用规则
Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
- 自定义 Hook 中
确保 Hook 在每一次渲染中都按照同样的顺序被调用,让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确
// 这是因为hooks是顺序执行的，
fiber.memorizzedState = {
...,
next: memorizedState: {
...,
next:
}
}
State Hook
useState 是一种保存state的新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就就会”消失”，而 state 中的变量会被 React 保留
参数 useState()方法需要唯一参数是初始state(state可以是字符串,数组,对象),如果需要多个状态,就多次调用useState()方法.
-
useState 方法的返回值为数组：包含当前 state 以及更新 state 的setState()函数。这与 class 里面 this.state.count 和 this.setState 类似，唯一区别就是你需要成对的获取它们。
- 与在类中使用 setState 的异同点：
相同点：也是异步的，例如在 onClick 事件中，调用两次 setState，数据只改变一次。
不同点：类中的 setState 是合并，而函数组件中的 setState 是替换。
- 与在类中使用 setState 的异同点：
React 假设当你多次调用 useState 的时候，你能保证每次渲染时它们的调用顺序是不变的
Effect Hooks
- 副作用: 网络请求类的数据操作和UI修改类的DOM操作
useEffect(() => { doSomething });
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API(希望在组件加载和更新时执行同样的操作)。
- 两个参数
-
第一个是个函数,是在第一次渲染以及以后更新渲染之后会进行的副作用
- 这个函数可以有返回值,如果有也必须是一个函数,在组件销毁时执行.
-
第二个参数是可选的,是一个数组,数组中存放的是第一个函数中使用的某些副作用依赖的属性,用来优化useEffect.
- 如果要运行effect 并仅将其在装载和卸载时清理一次,则可以将空数组作为第二个参数,这告诉react你的effect不依赖于来自props或state的任何值,所以永远不需要重新执行
- 如果使用优化, 确保该数组包含外部作用域中随时间变化且effect中使用的任何值,否则effect将引用先前渲染中的旧制.
-
useContext
组件状态共享
在 React 中有两种流行的方式来共享组件之间的状态逻辑: render props 和高阶组件，现在新加一种自定义Hook
