React中的Hooks是什么？

大家跟大家聊一聊React中的Hooks是什么：

Hooks：钩子、钩住，是 [email protected] 提供的新功能。

• 作用：为函数组件提供状态、生命周期等原本 class 组件中才有的功能，可以理解为通过 Hooks 为函数式组件钩入了 class 组件的特性。

• [email protected] 以前，class 组件（提供状态和生命周期） + 函数组件（展示内容）。

• [email protected] 以后，class 组件（提供状态和生命周期） + 函数组件（展示内容），Hooks（提供状态和生命周期） + 函数组件（展示内容），也可以混用这两种方式，即部分功能用 class 组件，部分功能用 Hooks + 函数组件。

• 注意：Hooks 只能在函数组件中使用，虽然有了 Hooks，但 React 官方并没有计划从 React 库中移除 class。

为什么要有 Hooks？

• Hooks解决了组件的状态逻辑复用问题

  a，在 Hooks 之前，组件的状态逻辑复用经历了：mixins（混入）、HOC（高阶组件）、render props 等模式。

  b，（早已废弃）mixins 的问题：数据来源不清晰；命名冲突。

  c，HOC、render props 的问题：重构组件结构，导致组件形成 JSX 嵌套地狱问题。

• Hooks解决了class 组件自身的问题

  a，选择：函数组件和 class 组件之间的区别以及使用哪种组件更合适。

  b，需要理解 class 中的 this 是如何工作的。

  c，同一业务的状态和业务逻辑被拆分到不同位置。

需要注意的是： Hooks 和之前 class 的写法是可以共存的。React官方没有计划从 React 中移除 class 组件，但不能在 Hooks 组件中，使用 class 组件相关的 API。