BFE.devAI解答 - 前端面试问题
50. 什么是React Hooks? 有何优劣?

React Hooks是React 16.8版本中新增的一种特性，它允许我们在函数组件中使用状态管理和其他React特性，例如生命周期和上下文。使用Hooks可以使开发者避免使用class组件和复杂的HOCs，从而提高代码可读性和可维护性。

Hooks的主要优点包括：

1. 简化代码：Hooks可以将状态逻辑从组件中提取出来，从而使代码更加简洁和易于阅读。
2. 避免类组件的限制：Hooks可以让我们在函数组件中使用状态管理和其他React特性，从而避免class组件的一些限制，例如无法使用多个状态或生命周期方法。
3. 更好的可测试性：使用Hooks可以提高代码可测试性，因为状态逻辑可以很容易地被单独测试。

然而，使用Hooks也存在一些缺点：

1. 手动管理副作用：与class组件不同，函数组件没有生命周期方法，因此必须手动管理一些常见的副作用，例如持续更新的数据或订阅。
2. 学习曲线：使用Hooks需要一定的学习曲线，因为它涉及到类似useState和useEffect的新概念。
3. 不完整的支持：尽管Hooks在React社区中越来越受欢迎，但在某些第三方库中仍存在支持欠缺的问题。

例如，我们之前有个需求是实现一个有按钮的弹窗组件，当点击“确认”按钮时弹窗消失，并且触发回调函数。在使用class组件时，我们需要在constructor中初始化state，定义handleClick事件函数，并在render方法中返回弹窗和按钮组件的JSX代码。而使用Hooks则可以更加简单地实现，只需要定义一个useState状态管理组件状态，一个useEffect处理副作用，然后在return语句中返回弹窗和按钮组件的JSX代码即可。