警惕 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 虽酷,但不要贪杯哦。

相关文章
|
12天前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
4天前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
18 4
|
7天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
1月前
|
前端开发 JavaScript
React_函数式Hooks和Class比较优缺点
React Hooks与Class组件都能返回JSX并接收props,但Hooks无`this`指向问题,用`useEffect`模拟生命周期,`memo`优化性能,状态更新用`useState`;Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化,状态用`this.state`和`this.setState`管理。
32 1
React_函数式Hooks和Class比较优缺点
|
12天前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
4天前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
13 1
|
11天前
|
前端开发
|
16天前
|
前端开发 JavaScript API
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
|
16天前
|
前端开发 JavaScript API
前端技术分享:React Hooks 实战指南
【10月更文挑战第1天】前端技术分享:React Hooks 实战指南
|
16天前
|
存储 前端开发 JavaScript
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
32 3