警惕 React 中的“伪” Hooks

前言

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

什么是“伪” 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 虽酷，但不要贪杯哦。