[react] React为什么要搞一个Hooks？

最新推荐文章于 2024-08-04 13:48:38 发布

前端小歌谣

最新推荐文章于 2024-08-04 13:48:38 发布

阅读量821

点赞数

分类专栏： # 前端面试题React 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/weixin_43392489/article/details/121380810

版权

React Hooks的出现旨在解决组件之间复用状态逻辑的难题，避免组件结构变得复杂难以理解。通过Hooks，开发人员可以提取状态逻辑进行独立测试和复用，减少“嵌套地狱”现象。此外，Hooks简化了复杂组件的管理和维护，使得状态管理更加可预测，并降低了对JavaScript类的依赖，从而改善学习曲线和优化潜力。

摘要由CSDN通过智能技术生成

[react] React为什么要搞一个Hooks？

动机
Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。

在组件之间复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管我们可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。

你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。

具体将在自定义 Hook 中对此展开更多讨论。

复杂组件变得难以理解
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相