reactjs - react : Is it okay if useCallback returns a value, 还是这是一个不好的模式？

Question

我有一个名为 filterContactsByValue 的函数.它被柯里化(Currying)并接受一个值和一个联系人列表，然后根据该值过滤列表并返回(新的)过滤列表。

由于列表通常很大(超过 10.000 个条目)，网络应用程序应该在智能手机上运行，​​并且过滤器考虑了许多值，我想优化计算资源。因此我使用 useDebounce 不要进行不必要的计算。

我也用过useCallback像这样来内存 filteredContacts 的计算:

function FilteredContacts({contacts}) {
  const [filterParam, setFilterParam] = useState('');
  const [value] = useDebounce(filterParam, 800);
  const filterContacts = filterContactsByValue(value.toLowerCase());

  // Is this okay? 🤔 ...
  const getFilteredContacts = useCallback(() => filterContacts(contacts), [
    value
  ]);

  return (
    <div className="main">
      <SearchBar
        value={filterParam}
        onChangeText={setFilterParam}
      />
      // ... and then this? 🧐
      <ContactList contacts={getFilteredContacts()} />
    </div>
  );
}

我想知道这是否可以，或者返回这样的值是否是不好的做法。如果它不好，为什么以及如何改进它？

编辑: filterContactsByValue功能:

import { any, filter, includes, map, pick, pipe, toLower, values } from 'ramda';
import { stringFields } from './config/constants';

const contactIncludesValue = value =>
  pipe(
    pick(stringFields),
    map(toLower),
    values,
    any(includes(value))
  );

const filterContactsByValue = pipe(
  contactIncludesValue,
  filter
);

Answer 1

简短回答:使用 useMemo而不是 useCallback ，像这样:

const filteredContacts = useMemo(() => filterContacts(contacts), [
    value
  ]);

...
<ContactList contacts={filteredContacts} />

为什么 ？ useCallback内存函数的创建。意思是，如果不同的参数相同，函数的引用将相同。每次它仍然会被调用，在你的情况下，不会阻止任何计算。

您想要的是仅在 value 时过滤您的联系人。变化。 useMemo记住函数的最后一个返回值，并且只会在差异参数更改时重新运行。而且它们每 800 毫秒不会更改一次以上，因为您可以很好地对其进行去抖动。

PS:你可以使用 useCallback防止 filterContacts无缘无故地重新计算:

 const filterContacts = useCallback(() => filterContactsByValue(value.toLowerCase(), [value]);

即使在您的情况下，性能增益也很小。