怎样自定一个通用钩子函数

看书时间约 5 min。

这一段时间大家分享一些 React 内置钩子函数，如：useRef、useMemo、useReducer、useImperativeHandle 等。这种内置钩子函数为他们的研发工作提供了极大的便捷。除开 React 所提供的内嵌 Hook 外，我们怎样撰写自已的钩子函数呢？

自定 Hook 能够让我们在各个部件中间分享逻辑性，提升程序代码复用性和可扩展性。要自定一个钩子函数，大家要遵循下列标准：

1. 自定 Hook 需要以 use 开始。
2. 自定 Hook 一定要一个函数，函数公式内部结构可以用 React 的 Hook。
3. 自定 Hook 务必回到数据信息或方式。

之上三条原则是我们一定要坚守的，在 React 官方文档之中都是有谈及。接下来我们就根据一个简单的电子计数器实例来操作怎样自定一个通用钩子函数。

1. 界定“电子计数器”钩子函数

要把电子计数器的通用性逻辑性获取到一个自定 Hook 中，这一钩子函数应具备下列水平：

1. 可以获得现阶段电子计数器数值；
2. 可以通过钩子函数给电子计数器增长值；
3. 可以通过钩子函数给电子计数器降低值。

依据这三条要求，我们能完成下边的自定 Hook：

import { useState } from 'react';

// 界定自定 Hook 的返回值类型
type UseCounterReturnType = [count: number, increment: () => void, decrement: () => void];

// 界定自定 Hook
export default function useCounter(initialCount: number = 0): UseCounterReturnType {
  // 应用 useState 来复位 count 状况和 setCount 函数公式
  const [count, setCount] = useState(initialCount);

  // 界定 increment 函数公式，用以提升电子计数器数值
  const increment = () => {
    setCount(count   1);
  };

  // 界定 decrement 函数公式，用以降低电子计数器数值
  const decrement = () => {
    setCount(count - 1);
  };

  // 回到 count、increment 和 decrement 函数公式做为自定 Hook 的传参
  return [count, increment, decrement];
}

我们一般会将自定的 Hook 方式放到一个独立的文档中维护保养。上边的实例编码是通过 TS 实现一个 useCounter 函数公式。依稀记得上边大家所提到的三条标准吗？自定 Hook 的函数名一定要 use 开头。这一自定义函数中，大家重新定义了一个情况 count 用于纪录电子计数器数值，与此同时重新定义了2个函数公式用于提升电子计数器数值减少电子计数器数值。在函数公式最终，把他们放在一个二维数组中回到出来。

2. 应用“电子计数器”钩子函数

需要使用上边的 useCounter 也很简单，只需像用其他 Hook 一样启用就可以。

import useCounter from './useCounter';

function MyComponent1(): JSX.Element {
  const [count, increment, decrement] = useCounter(10);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

上边代码中，大家在启用 useCounter 时给电子计数器设置了一个初始值 10。当点一下页面中的“Increment”按键时，电子计数器加1；点一下页面中的“Decrement”按键时，电子计数器减 1。现阶段电子计数器数值3D渲染在 h1 标识中。

3. 应用领域

自定 Hook 的使用场景十分广泛，下边总结了一些普遍的使用场景：

1. 解决数据逻辑

   在与后端接口互动时，大家可以利用自定 Hook 将它们的获得、解决、缓存文件等抽象化出去。例如，能够创建一个 useFetch Hook，用以从 API 插口中读取数据并缓存文件结论，以提升网页页面特性。

2. 解决表格逻辑性

   表格的认证、格式化硬盘等逻辑性还可以抽象化出去，或者可以创建一个 useForm 钩子函数来处理表格的信息逻辑校检。

3. 解决主视图逻辑性

   UI 上的一些实际操作，例如动态效果、手势实际操作、翻转解决的都能够抽象化出去，例如创建一个 useSwipe 的钩子函数用以解决这些逻辑性。

4. 解决不良反应

   比较常见的计时器、定阅事情等不良反应也都能用自定的钩子函数来处理，或者可以创建一个 useInterval 用以解决计时器逻辑性。

4. 汇总

在建立与使用自定 Hook 时，我们要根据实际的项目或开发设计情景选择适合的 Hook，灵便把握自定 Hook 的建立与使用能巨大提高自身的研发效率，对提升编码可复用性和可扩展性一样有很大帮助。

文中先发微信公众平台码上花蛤，热烈欢迎关注哦~