React Hooks 是 React 16.8 新增的特性，它可以使函数式组件拥有类组件相同的能力，能够让代码更简洁、易读。随着更多开发者使用 React Hooks，我们需要深入了解它的优缺点，以确保我们可以最大化地利用其优势，并避免其潜在的弱点。
优点
1. 前端开发变得更加简单
传统 React 类组件常常使用了许多不必要的组件模板代码，使得我们的代码变得异常冗长。React Hooks 将大量繁琐的模板代码转化为极简单的 JavaScript 函数，使得我们能够更迅速地编写可读性更高、又更加抽象的组件（如复杂的表单和数据表格）。
通过使用 React Hooks，我们可以省去繁琐的组件声明和配置，以及大量冗余的代码，从而更加简洁地完成前端开发任务。
2. 允许更好地完成复杂的状态管理
在 React 类组件中，状态管理可能会变得非常棘手。React Hooks 可以最大化地利用 JavaScript 的“可变性”特性，从而使得状态管理变得更加简单，并让我们可以通过 JavaScript 对象、数字和字符串等数据类型轻松获取和更新组件的状态。
此外，在现代前端框架中，状态管理常常使得我们的代码变得复杂。React Hooks 使得我们可以就地构建状态的组件，从而产生更加简单的状态管理方式，更加直观地合并多种状态，以及更加容易地进一步修改状态。
3. 可以完全替代类组件
React Hooks 在功能上完全可以取代类组件。在无需考虑 React 生命周期和类组件的继承特性情况下，我们可以使用全新的函数式组件语法，更快地开发复杂的 web 前端应用程序。
我们可以使用 useContext 来简化上下文（context）的相关操作，使用 useEffect 来简化使用类组件时可能繁琐的方法，使用 useMemo 和 useCallback 来发现和解决公共的问题区域等等。因此，React Hooks 的优点之一就在于它是在编写前端代码时的理想选择。
缺点
1. 缺乏固有的对类组件的继承机制的支持
在 React 类组件中，组件继承机制的特性是非常重要的。React Hooks 无法像传统的 React 类组件一样，显式地解耦组件模板代码和组件监听代码，这使得一些极端情况下的组件看起来非常混乱。
如果希望以 React Hooks 的方式使用组件继承机制，我们需要在全局作用域中显式地宣布该继承机制，或通过在更为灵活的情况下使用类组件的方法（如 React.forwardRef）来实现。
2. 起步成本较高
对开发者而言，React Hooks 的大幅度转变和巨大限制甚至可能会导致有些工具技术团队切换到其他库或框架的开发，这样人们就需要重新学习如何使用 Hooks，也需要考虑如何运用开发工具效率最高，不同工具之间的差别也很大。因此，就像 React 一样，熟练运用 React Hooks 所需的起步成本较高。幸运的是，React Hooks 因其流行而得到了许多开发者共同努力的协助和支持，易用性一直在提高。
3. 现有的代码不兼容
React Hooks作为一种全新的编程方式，意味着使用新式组件的开发者必须在新的API上进行学习。这可能也意味着，现有代码库中可能存在许多不兼容的代码，容易导致无法进行优化和扩展。如果希望完全采用新的组件系统，则必须完全撤销现有组件的代码。这会导致混乱和重构，可能会耗费较长时间。
案例说明
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- ----- ------- - -- -- - ----- ------- --------- - ------------ ------------ -- - -------------- - ---- ------- -------- ------- -- --------- ------ - ----- ------ ------- ------- --------- ------- ----------- -- -------------- - ---- ----- -- --------- ------ -- - ------ ------- --------展开代码
上述例子中，useState 和 useEffect 两个 React Hooks 函数起到了很好的效果。useState 使得 state 的更新变得更加方便，而 useEffect 的使用则代替了 componentWillUpdate 和 componentDidMount 等传统方法，我们可以在 effect 函数中获取和更新 state 或 props 的值。总体而言，React Hooks 可以使前端开发变得更加轻松、快捷，也更加容易理解和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d70d47a941bf7134ce5cf0
