Question

我有这个ProductSearchContainer.js文件，它无法处理和维护太久了。

它负责什么：

执行网络请求以获取产品列表
使用从URL查询字符串获取的过滤器值过滤该列表，并使用新的filterList更新状态
它还具有在单击每个过滤器之前模拟产品长度的功能。例如：带有 Black（5）的滤色器，如果单击 Black ，您将获得5种产品。
其他功能

文件太大（超过600行），我决定将一些逻辑移至其他文件。

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

1以应用活动过滤器（获取list和activeFilters数组，并返回这些过滤器的过滤列表。
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:

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

选项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的性能更好，因为您（可能）编写了这样的选项，使得这两个功能仅需要实例化一次。在自定义钩子版本中，这两个函数以及包含它们的数组将在每个渲染器上创建。

但是，除非您的案例比您的例子要多得多，要计算得多，否则差异几乎可以忽略。

因此，真正取决于您和您的代码读者发现哪种代码更清晰。我个人跌倒在钩子的侧面。

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

1 个答案: