Hooks与普通函数的区别

在这里的Hooks具体指的是自定义Hooks，自定义的Hooks与我们定义的普通函数类似，都可以封装逻辑，以实现逻辑的复用。Hooks实际上是一种特殊的函数，而由于Hooks的特殊实现，他们之间也存在着一定的区别。

描述

在我开始学习React Hooks的时候，我就比较疑惑这个问题。首先看一下官方文档，在自定义Hooks的部分说明了，构建自己的Hooks可以让您将组件逻辑提取到可重用的函数中。如果仅仅是这样的话，那么我们也完全可以使用普通的函数来实现逻辑的复用，而没必要去使用Hooks了。当然在这里还是得先明确一点定义: 自定义Hooks就是很明确的定义了，其以use开头，内部可以调用其他的Hooks；在这里描述的的普通函数指的是我们平时写的抽离公共逻辑的函数，而不是在我们定义的普通函数中去调用其他Hooks这种方式。如果在普通函数中调用了其他Hooks，那么这个函数就不再是普通函数了，除了违反了Hooks的命名规则以外，那就完全是一个Hooks的定义了。实际上，Coding比较重要的两个概念是逻辑与数据，文档中提到的将组件逻辑提取到可重用的函数中，重要的是逻辑这两个字，而在两个组件中使用相同的自定义Hooks是不会共享State的。如果我们直接编写一个普通的函数，那么对于其数据是在所有调用者中共享的，因为其只是一个模块，当然前提是我们不会去new出一个新对象来保存状态，在这里只讨论最plain的调用方式，因为Hooks也是直接以非常plain的方式进行调用的。那么也就是说，如果我们使用Hooks的话，实际上由于可以调用useState、useRef等Hooks，从而获取了对于这个Fiber的访问方法，那么也就相当于我们可以将状态或者说数据存放于当前节点当中，而不是类似于普通函数在全局中共享。当然如果需要全局共享状态的话，状态管理方案是更好的选择，而不是全局变量。

示例

举一个例子，对于数据请求，我们通常会封装一个request函数，假如我们需要对这个函数做一层缓存，那么就会有逻辑与数据的复用，在逻辑方面我们抽离出的方法差距不大，而对于数据缓存复用方面在这里通过普通函数与自定义Hooks的实现便是不同的。

普通函数

在普通函数当中，其就是一个模块，因此其数据是在所有调用者中共享的，因此我们可以通过一个Map来存储数据，这样就可以实现数据的复用。在这里需要注意的是，如果我们的url需要实现在不同组件调用返回的数据不同的话，例如可能会有根据当前页面的referer请求头来决定返回数据的需求，那么这种全局共享的数据就不适用了，就需要多添加一个参数来区分不同的数据，这样就会导致逻辑与数据的耦合，因此这种方式不是很好。当然这也是基于特定需求的，在这里只是举一个例子，毕竟实际上适合的才是最好的。

代码语言：javascript复制

const cache = new Map();
export fetch = (url) => {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const promise = fetch(url);
  cache.set(url, promise);
  return promise;
}

自定义Hooks

在自定义Hooks当中，数据被锁定在了Fiber当中，也就是说数据的共享范围是在当前组件节点中，相对于全局状态共享来说粒度会更细一些。当然我们如果想直接在全局共享数据的话，这种方案就不合适了，可能还需要配合一个全局的状态管理才行。还是那句话，在这里只是举一个例子，毕竟实际上适合的才是最好的。

代码语言：javascript复制

const useRequest = (url) => {
    const map = useRef(new Map());
    if (map.current.has(url)) {
        return map.current.get(url);
    }
    const promise = fetch(url);
    map.current.set(url, promise);
    return promise;
}

总结

简单总结一下两者的区别:

官方提供的Hooks只应该在React函数组件/自定义Hooks内调用，而不应该在普通函数调用。
自定义Hooks能够调用诸如useState、useRef等，普通函数则不能。由此可以通过内置的Hooks获得Fiber的访问方式，可以实现在组件级别存储数据的方案等。
自定义Hooks需要以use开头，普通函数则没有这个限制。使用use开头并不是一个语法或者一个强制性的方案，更像是一个约定，就像是GET请求约定语义不携带Body一样，使用use开头的目的就是让React识别出来这是个Hooks，从而检查这些规则约束，通常也会使用ESlint配合eslint-plugin-react-hooks检查这些规则，从而提前避免错误的使用。

每日一题

代码语言：javascript复制

https://github.com/WindrunnerMax/EveryDay

参考

代码语言：javascript复制

https://www.zhihu.com/question/491311403
https://zh-hans.reactjs.org/docs/hooks-custom.html
https://stackoverflow.com/questions/60133412/react-custom-hooks-vs-normal-functions-what-is-the-difference

react

0 人点赞