react 生命挂钩_useFetch和自定义React挂钩

react 生命挂钩

第一件事第一 (First Things First)

Released with React 16.8, React Hooks changed the way we see components. They made using React class components unnecessary. Reducing the importance of class-based components came with a tradeoff, however. If you're creating class-based components, you can’t add lifecycle events — so what's the point of using React in the first place?

随着React 16.8发布，React Hooks改变了我们查看组件的方式。 他们不需要使用React类组件。 但是，要降低基于类的组件的重要性需要进行权衡。 如果要创建基于类的组件，则不能添加生命周期事件-那么首先使用React的意义何在？

Here’s where React Hooks come to the rescue. Hooks puts your functions on steroids. You can stop relying on classes and move on to functions (if you prefer classes over functions it’s a different story). Hooks will revolutionize how the React code is written. Sooner or later, you’ll have to dive into them.

这是React Hooks进行救援的地方。 挂钩将您的功能放在类固醇上。 您可以停止依赖类，而继续使用函数(如果您更喜欢类而不是函数，那就另当别论了)。 Hooks将彻底改变React代码的编写方式。 迟早，您将不得不深入其中。

自定义挂钩？ (Custom Hooks?)

There might be instances where you have been using the same logic for your class components (stateful) many times. Formerly, we could handle this situation by relying on render props and higher-order components. But we can do it in a much simpler and cleaner way with custom Hooks. These are normal JavaScript functions that can use other hooks inside them and contain a common stateful logic that can be reused within multiple components. These functions are prefixed with the word “use”.

在某些情况下，您多次对类组件使用相同的逻辑(有状态)。 以前，我们可以依靠渲染道具和高阶组件来处理这种情况。 但是我们可以使用自定义钩子以更简单，更干净的方式进行操作。 这些是正常JavaScript函数，可以在其中使用其他挂钩，并包含可以在多个组件中重用的通用状态逻辑。 这些功能以“使用”为前缀。

Just to reiterate, Hooks are just functions, so one good approach to avoid repeating code, and applying the DRY pattern (if you don’t know what DRY is I would recommend you to read my article about clean code), is to create custom Hooks and import all the components that are necessary to reuse it.

重申一下，Hooks只是函数，因此一种避免重复代码并应用DRY模式的好方法(如果您不知道DRY是什么，我建议您阅读有关干净代码的文章)，是创建自定义代码挂钩并导入所有可重复使用的组件。

做你的作业 (Do Your Homework)

If you caring more about productivity than learning, look at the npm packages and see whether there’s already a custom Hook that matches your needs. However, my recommendation is that even if there’s a custom Hook out there for you, you should develop the skills to create your own.

如果您更关心生产力而不是学习，请查看npm软件包，看看是否已经有满足您需求的自定义挂钩。 但是，我的建议是，即使为您提供了自定义的挂钩，您也应该培养自己创建技能。

钩子规则 (Rules of Hooks)

According to the Official React website, there are some rules that we need to follow to use React Hooks:

根据React官方网站的介绍 ，使用React Hooks需要遵循一些规则：

• Only call Hooks from React function components. Don’t call hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — inside your own custom Hooks. We’ll learn about that in a moment.)
  仅从React函数组件调用Hooks。 不要从常规JavaScript函数中调用钩子。 (在您自己的自定义钩子中，只有另一个有效的位置可以称为钩子。稍后我们将对此进行介绍。)
• Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
  仅在顶层调用挂钩。 不要在循环，条件或嵌套函数中调用Hook。

useFetch Hook目的 (The useFetch Hook Purpose)

There are many ways to make HTTP REQUEST in the front end, the most common is Axios and fetch. The purpose of this custom Hook is to encapsulate your request and avoid code repetition inside your project:

在前端进行HTTP REQUEST的方法有很多，最常见的是Axios和fetch。 此自定义Hook的目的是封装您的请求，并避免项目内的代码重复：

This code above is the custom Hook, but how do we can use it in reality? It's quite simple:

上面的代码是自定义的Hook，但实际上如何使用它呢？ 很简单：

useFetch的优点是什么？ (What's the Advantage of useFetch?)

With Hooks, you can access your data layer from the view (your functional component), creating a more reliable structure separating those concepts. This is more important when you need to handle multiple requests inside your functional component. When you need only fetch data once, without pagination or parameters or query parameter updates inside the URL, then useFetch tends to be not so useful.

使用Hooks，您可以从视图(您的功能组件)访问数据层，从而创建一个更可靠的结构来分隔这些概念。 当您需要在功能组件中处理多个请求时，这一点尤为重要。 当您只需要获取数据一次，而无需在URL内进行分页或参数更新或查询参数更新时， useFetch往往没有那么有用。

翻译自: https://medium.com/better-programming/usefetch-and-custom-react-hooks-13efc51ef5de

react 生命挂钩