|
大家跟大家聊一聊React中的Hooks是什么：
Hooks：钩子、钩住，是?React@16.8?提供的新功能。
-
作用：为函数组件提供状态、生命周期等原本 class 组件中才有的功能，可以理解为通过 Hooks 为函数式组件钩入了 class 组件的特性。 -
React@16.8?以前，class 组件（提供状态和生命周期） + 函数组件（展示内容）。
-
React@16.8?以后，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。
|