My App

更多待发现的内容

更多待发现的内容

在本模块中,我们学习了如何使用一些内置的钩子,包括 useId 、 useRef 和 useEffect 。我们还学习了如何组合这些钩子来创建我们自己的自定义钩子抽象。

当谈到钩子时,兔子洞深不见底。还有更多官方钩子等待我们去发现,我们将在整个课程中继续学习它们。我们将在第 4 模块中涵盖 useContext ,在第 5 模块中涵盖 useReducer 。

利用生态系统

当 React 团队发布 hooks 时,他们解锁了一种新的抽象——自定义 hooks——可以用于封装和重复使用一部分 React 逻辑。在此后的几年里,社区构建了大量惊人的库和资源,利用自定义 hooks。

我们已经在“提取数据到组件”课程中看到一个例子。我们看到 S W R 库暴露了一个自定义钩子, useSWR ,它抽象了在 React 应用程序中进行数据提取时所有出人意料的复杂挑战。

还有第三方的“工具钩子”集合。例如,react-hookz 是一个包含几十个钩子的 NPM 包:

react-hookz

这些 hooks 中有些会让你感到熟悉;例如,它们的 useIntersectionObserver hook 与我们在本模块早些时候构建的 useIsOnscreen hook 非常相似。

我们为什么要构建自己的 IntersectionObserver 钩子,而现有这样的库呢?创建和维护我们自己的自定义钩子具有巨大的价值。每个应用程序都是独特的,无论一个库多么庞大,总会有一些情况需要我们从头开始构建。

例如,我创建了一个名为 useBoop 的自定义钩子,它允许我在一个元素上触发一种非常特定类型的动画。你在任何实用库中都找不到这个钩子!

但是如果我们需要一个通用工具,比如 useWindowSize 呢?我们应该从头开始构建它,还是使用这个库?

这是我的建议:如果你认为从这个过程中可以学到东西,就应该自己动手去做。这是对你时间和精力的一个很好的投资。

随着经验的增加,你可能会发现自己在不同项目中不断创建相同的工具。在这种情况下,重复做同样的事情不会让你学到太多,因此库是一个很好的节省时间的工具。

如果你尝试自己构建它,你可能会发现某些钩子超出了你的能力范围。这个兔子洞很深,有些钩子需要专家级的技能才能创建。在这些情况下,使用一个库也是有意义的。不过我建议你先认真尝试一下!你可能会对自己能做到的事情感到惊讶。

我确实认为过于依赖这些库存在危险。如果每当遇到新问题时你都自动找库,你的技能就会退化。迟早,你会遇到一个无法用库解决的问题,而你没有能力自己解决它!

在我们进行这个课程时,我们将采用组合方法,大部分时间构建我们自己的自定义钩子,在特殊情况下使用库。

On this page