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

Question

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

负责什么：

进行网络请求以获取产品列表
使用从 URL 查询字符串中获取的过滤器值过滤该列表，并使用新的 filteredList
它还具有在您单击之前模拟每个过滤器上产品长度的功能。例如：带有 Black(5) 的滤色器表示如果单击 Black.
以及其他功能

文件变得太大（600 多行），我决定将一些逻辑片段移动到其他文件。

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

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

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

选项#1

我的第一个想法是变成一个自定义挂钩。所以我做了。它有效（见下面的片段）。

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:

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

选项 #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 会执行得更好，因为您（可能）将其编写为这两个函数只需要实例化一次。在自定义挂钩版本中，这两个函数以及保存它们的数组将在每次渲染时创建。

但是，除非您的情况 计算强度 比您的示例所显示的要多得多，否则差异几乎可以忽略不计.

所以这真的取决于您和代码的读者认为哪种代码更易读。我个人倒在钩边。

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

Import function vs turning it into custom hook

reactjs

react-hooks