应该会喜欢的5个自定义 Hook

t hooks 已经在16.8版本引入到库中。它允许我们在函数组件中使用状态和其他React特性，这样我们甚至不需要再编写类组件。

实际上，Hooks 远不止于此。

Hooks 可以将组件内的逻辑组织成可重用的独立单元。

Hooks 非常适合 React 组件模型和构建应用程序的新方法。Hooks 可以覆盖类的所有用例，同时在整个应用程序中提供更多的提取、测试和重用代码的灵活性。

构建自己的自定义React钩子，可以轻松地在应用程序的所有组件甚至不同应用程序之间共享特性，这样我们就不必重复自己的工作，从而提高构建React应用程序的效率。

现在，来看看我在开发中最常用的5个自定义钩子，并头开始重新创建它们，这样你就能够真正理解它们的工作方式，并确切地了解如何使用它们来提高生产率和加快开发过程。

我们直接开始创建我们的第一个自定义React Hooks。

useFetch

获取数据是我每次创建React应用时都会做的事情。我甚至在一个应用程序中进行了好多个这样的重复获取。

不管我们选择哪种方式来获取数据，Axios、Fetch API，还是其他，我们很有可能在React组件序中一次又一次地编写相同的代码。

因此，我们看看如何构建一个简单但有用的自定义 Hook，以便在需要在应用程序内部获取数据时调用该 Hook。

okk,这个 Hook 我们叫它 useFetch。

这个 Hook 接受两个参数，一个是获这里，我们使用惰性初始化来读取 localStorage 以获取键的值，如果找到该值，则解析该值，否则返回传入的initialValue。

如果在读取 localStorage 时出现错误，我们只记录一个错误并返回初始值。

最后，我们需要创建 update 函数来返回它将在localStorage 中存储任何状态的更新，而不是使用useState 返回的默认更新。此函数同时更新React状态和 localStorage 中的相应键/值。这里，我们还可以支持函数更新，例如常规的useState hook。

最后，我们返回状态值和我们的自定义更新函数。

现在可以使用useLocalStorage hook 将组件中的任何数据持久化到localStorage中。

（编辑：烟台站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!