警惕 React 中的“伪” Hooks

简介: ## 前言本来以为这是一个新手才会犯的小错误,但最近又在一个项目代码里看到这个问题,所以决定聊一下。## 什么是“伪” Hooks?你应该是第一次听说这个概念,但顾名思义,“伪” Hooks 就是指把一个不是 Hook 的函数起名为 `useXXX`,比如:```jsximport a from 'xxx';export function useA() { return

前言

本来以为这是一个新手才会犯的小错误,但最近又在一个项目代码里看到这个问题,所以决定聊一下。

什么是“伪” Hooks?

你应该是第一次听说这个概念,但顾名思义,“伪” Hooks 就是指把一个不是 Hook 的函数起名为 useXXX,比如:

import a from 'xxx';

export function useA() {
  return a;
}

如果想更好的了解“伪” Hooks,就需要更深入的理解 Hooks 的运作机制。

为什么不要写“伪” Hooks?

不必要的限制

我们都知道使用 Hook 的时候,有一些限制,这些限制是 Hooks 内部实现时不得已而加上的,它意味着副作用。
如果可以,React 一定不想把 API 加上 use 前缀。

给普通函数加上 Hooks 的限制,就是给调用方制造麻烦。

Hooks 具有传染性

如果一个函数依赖 Hooks,那么它自己就会变成 hook 或组件。如果你把一个基础的 API 搞成“伪” Hook 导出,在项目的代码里,就会出现一系列“伪” Hooks。

如何避免成为“伪” Hooks 制造者?

“伪” Hooks 并不难识别,通常,函数体内没有依赖 Hooks,那它就不应该是一个 Hook(可以搞一个 Linter 警告下)。

但写出“伪” Hooks 的人通常并不是不能识别它,而是犯了一个思维上的错。
通常我们遇到复杂或重复逻辑,都是提取出一个函数。但 Hooks 写多了,容易在潜意识里认为 Hooks 很酷,总想着“抽成一个 Hook”。就像有些 Java 程序员总想着搞一个 Class 或设计模式一样。

所以我们应该告诫自己 Hooks 意味着限制,意味着“脏”,是应该尽量避免的东西。

总结

这虽然是个小问题,甚至不会造成运行时的 Bug,但它真的是一个麻烦制造者。

Hooks 虽酷,但不要贪杯哦。

相关文章
|
2月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
2月前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
74 4
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
22天前
|
前端开发 JavaScript API
探究 React Hooks:如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法,通过全新API优化组件逻辑复用和状态管理,提升开发效率和代码可维护性。
|
25天前
|
前端开发
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
21 3
|
1月前
|
前端开发 JavaScript
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
34 2
|
2月前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks,除了 `useRef` 之外,还有许多其他重要的 Hooks,它们共同构成了函数式组件开发的基础。
37 6
|
19天前
|
前端开发 JavaScript
React Hooks 深入解析
React Hooks 深入解析
20 0