什么是 Hook ？

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

本质上就是一个函数，它简洁了组件，有自己的状态管理，生命周期管理，状态共享。

Hook 出现解决了什么 ？

组件之间状态复用， 例如：使用useContext 可以很好的解决状态复用问题，或者自定义 来定制符合自己业务场景遇到的状态管理。 在函数组件中 生命周期的使用，更好的设计封装组件。在函数组件中是不能直接使用生命周期的，通过 很好的解决了此问题。 函数组件与 class 组件的差异，还要区分两种组件的使用场景。 使用 完全不用去想这些，它可以使用更多 新特性。

什么时候使用 Hook ?

在函数组件顶层调用

在 函数中使用 / 自定义 中使用

内置的

状态管理 生命周期管理 共享状态数据 缓存值 获取Dom 操作 缓存函数 redux 相似 子组件暴露值/方法 完成副作用操作，会阻塞浏览器绘制

状态管理

在 组件中，我们获取 是 通过 来获取的。

而在中, 是没有 的， 我们可以使用 提供的 来管理和维护 .

定义 / 使用

完整栗子

生命周期管理

定义

可以看作是 的 生命周期管理。

因为在 函数式组件中无法直接使用生命周期，就必须托管 来进行管理使用了。

可以使用的 3 个生命周期函数：

无需清除 使用

什么是无需清除 使用？

React 更新 DOM 之后运行一些额外的代码那么它就是在生命周期的 和 中执行即可。

清除 使用

1. 什么是 清除 ？

当组件进行卸载时，需要执行某些事件处理时，就需要用到 class 组件生命周期的 . 在 中很方便使用，在内部返回一个方法即可，在方法中写相应业务逻辑

2. 为什么 要在 中返回一个函数 ？

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。

监听 变化

可以通过控制 监听 变化来实现相应的业务逻辑。

完整栗子

什么是 ?

返回的是一个可变的ref对象，它的属性current被初始化为传入的参数（initialValue），返回的ref对象在组件的整个生命周期内保持不变。

作用：

获取Dom操作，例如 获取 焦点

获取子组件的实例(只有类组件可用)

在函数组件中的一个全局变量，不会因为重复 render 重复申明

栗子

状态数据共享

解决了什么

在日常开发中，我们父子组件都是通过 来进行通信，如果遇到 那么我们就不好通过 来处理了。

这时候可以想想怎么可以把 组件 状态 共享出去使用？

本小节通过 来 达到组件数据共享

什么是

数据共享，任何组件都可访问Context 数据。

在 中，组件数据通过 来达到 自上而下的传递数据，要想实现全局传递数据，那么可以使用 .

注意：

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

创建

在使用 前提，必须创建它，可以为它单独创建一个文件来管理,

使用

在使用 时，它通常用在顶级组件(父组件上)，它包裹的内部组件都可以享受到 的使用和修改。

通过 来进行包裹，值通过 传递。

子组件如何使用 传递过来的值 ?

通过 Hook 可以很方便的拿到对应的值.

提升性能优化

定义

用于性能优化，通过记忆值来避免在每个渲染上执⾏高开销的计算。

参数：

返回值是 值，具有缓存作用 控制重新执⾏的数组，才会 重新执行

注意：

不传数组，每次更新都会重新计算 空数组，只会计算一次 依赖对应的值，当对应的值发生变化时，才会重新计算(可以依赖另外一个 useMemo 返回的值)

栗子

解析栗子

当点击了 5 次更新 值，页面中 的值始终显示为 0，这是为什么呢？

因为我在 监听记录的是 的值，当 值发生变化时，页面上的 在会重新计算，虽然你点击了 5 次 更新 ，页面没有更新，但是已经缓存起来了，当点击 更新 时，它会 计算 , 最终结果 为 5。

减少了计算消耗。

提升性能优化

定义

可以说是 的语法糖，能用 实现的，都可以使用 , 常用于react的性能优化。

的参数：

是一个函数用于处理逻辑 控制重新执⾏的数组，才会重新执⾏

使用

它的使用和 是一样的，只是 返回的函数。

小结

和 功能类似，都是提升性能优化。

该采用哪种方式来最佳实践，还有待探索。

欢迎 读者 与 我交流。

网上对 和 的看法 ？

如果在函数式组件中的话，确实应该当作最佳实践来用，但是使用它的目的除了要缓存依赖未改变的回调函数之外（与 useMemo 类似），还有一点是为了能够在依赖发生变更时，能够确保回调函数始终是最新的实例，从而不会引发一些意料之外的问题，我感觉后者才是使用 useCallback 的出发点，而非缓存。因为你想啊，即使不用 useCallback，假设这个回调函数也没有任何依赖状态，我直接把这个函数声明在组件外部不也可以吗？我直接使用 ref 不是更自由吗？ 本身名字就是和缓存有关联的，本质上就为了解决一个事情，在 render 里面不要直接创建对象或者方法什么的，因为组件每渲染一次，就会创建一次（比如 style 或者一些常量状态），造成不必要的资源浪费。理想情况应当是，如果存在依赖，只在依赖变化时重新创建，不存在依赖，那就只创建一次。表面上看，如果所有状态都用 useMemo，肯定没什么问题，但你还需从缓存的代价上来分析这个问题，如果使用 useMemo 缓存一个状态的代价大于它带来的优势，那是不是反而适得其反了？

大家对 和 有何看法，欢迎在下方评论

定义

可以让你在使用 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 这样的命令式代码。 应当与 一起使用。

作用 :

子组件可以暴露给父组件 实例使用

参数1： 子组件向父组件暴露的实例

参数2： 函数，传递的父组件可操作的实例和方法

参数3： 监听状态，更新状态

定义

它是 的替代方案。它接收一个形如 的 ，并返回当前的 以及与其配套的 方法。