Hook 是什么
Hook 是 React 16.8.0 的新特性。
Hook 是钩子函数,通过使用 Hook 可以在 函数组件
中引入 React state
及 生命周期
等特性,它可以让我们在不编写 class 的情况下使用 state 及其他的 React 特性。
Hook 可以解决什么问题
Hook 可以解决如下问题:
组件间复用状态逻辑困难
React 之前用
render props
和高阶组件
解决此问题,但需要重新组织组件结构。现在可以使用 Hook 在无需修改组件结构的情况下复用状态逻辑。复杂组件越来越难以理解
之前在不同的生命周期中维护的逻辑关联的代码,现在可以使用 Hook 将组件中逻辑关联的部分拆分成更小的函数(比如设置订阅或请求数据)。还可以使用 reducer 来管理组件的内部状态,使其更加可预测。
避开 class
js 中的 class 和其他语言中的 class 有很大区别,特别是 this 的工作方式,编写 React 组件时,需要额外编写 this 和事件处理器的绑定,而这些代码其实非常冗余。
class 不能很好的压缩,会使得热加载出现不稳定的情况。
Hook 能够使你避开 class 也能使用更多的 React 特性。
Hook 对现有代码的影响
- 可选功能
- 无需重写现有代码即可使用 Hook
- 不是非得用 Hook 不可,如果不想也可以不用
- 100% 向后兼容
- 可用版本
- 从 React 16.8.0 版本之后可以使用 Hook