导入函数与将其转换为自定义钩子

Question

我有这个 ProductSearchContainer.js 文件，它的处理和维护时间过长。

它的职责：

• 通过网络请求获取产品列表
• 使用从 URL 查询字符串中获取的过滤器值过滤该列表，并使用新的过滤列表更新状态
• 它还具有在单击之前模拟每个过滤器上产品长度的功能。例如：一个带有 Black(5) 的滤色器，表示如果您点击 Black，您将获得 5 件产品。
• 其他功能

文件变得太大（超过 600 行），我决定将部分逻辑移至其他文件。

对于每个过滤器类别（品牌、价格、评级等），我有两个功能：

• 1 应用活动过滤器（获取list 和activeFilters 数组，它会返回这些过滤器的过滤列表。
• 1 来模拟下一个滤镜长度（就像我在上面的颜色示例中解释的那样）

注意：您将在下面看到它们依赖于状态变量 activePriceFilters，但它们在执行过程中不调用任何 React Hook。

---

选项 #1

我的第一个想法是变成一个自定义钩子。所以我做了。它可以工作（见下面的 sn-p）。

function usePriceFilter(activePriceFilters) {

  function applyPriceFilter(list, activePriceFilters) {
    console.log('I will get a list and return it filtered by activePriceFilters');
  }

  function simulateNextPriceFilter(list, someTestPriceFilter) {
    console.log('I will get a list and return the length of the filtered list by price');
  }

  return [applyPriceFilter,simulateNextPriceFilter];

}

我通过做来消费：

const [applyPriceFilter,simulateNextPriceFilter] = usePriceFilter(activePriceFilters)

我的意思是，我的自定义钩子基本上是一个高阶函数，但我认为它仍然符合自定义钩子的条件：

From React DOCS:

自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hook。

---

选项 #2

但我想我也可以变成一个常规的.js 文件，导出这两个函数，然后对它们进行常规导入。喜欢：

import {applyPriceFilter,simulateNextPriceFilter} from './priceFilterHelpers

---

问题：

这两种方法在功能或性能上是否存在差异？我应该支持 1 而不是另一个吗？

我认为自定义钩子更具可读性，但是这样做我还有什么收获吗？

function App() {

  const [activePriceFilters,setActivePriceFilters] = React.useState(['10to20','50+']);

  const [applyPriceFilter, simulateNextPriceFilter] = usePriceFilter(activePriceFilters);

  return(
    <React.Fragment>
      <button onClick={applyPriceFilter}>Apply Price Filters</button>
      <button onClick={simulateNextPriceFilter}>Simulate Price Filter</button>
    </React.Fragment>
  );

}

function usePriceFilter(activePriceFilters) {

  function applyPriceFilter(list, activePriceFilters) {
    console.log('I will get a list and return it filtered by activePriceFilters');
  }

  function simulateNextPriceFilter(list, someTestPriceFilter) {
    console.log('I will get a list and return the length of the filtered list by price');
  }

  return [applyPriceFilter,simulateNextPriceFilter];

}


ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

Answer 1

理论上，您的选项 #2 会执行得更好，因为您（可能）会编写它，使得这两个函数只需要实例化一次。在自定义钩子版本中，这两个函数以及保存它们的数组将在每次渲染时创建。

但是，除非您的案例比您的示例所显示的计算量大得多，否则差异几乎肯定可以忽略不计。

因此，真正取决于您和您的代码读者认为哪种代码更易读。我个人倒在钩子的一边。