Question

所以我有这个自定义钩子：

import sortBy from 'lodash/fp/sortBy';
import { useState, useEffect } from 'react';

/**
 * Custom effect that enables data sorting.
 * It is triggered every time when sort order or data has changed.
 *
 * @param {*} initialSort
 * @param {*} data
 */
function useSorting(initialSort, data) {
  const [sortOrder, setSortOrder] = useState(initialSort);
  const [sortedData, setSortedData] = useState([]);
  useEffect(() => setSortedData(sortBy(sortOrder, data)), [data, sortOrder]);

  return [sortedData, sortOrder, setSortOrder];
}

export default useSorting;

它接受要排序的数据和排序顺序。每次通过setSortOrder更改排序顺序或提供新的data时，都应进行排序并更新sortedData。

这是正确的方法吗？我的意思是说，有一个useEffect在监听[data, sortOrder]的变化吗？

如果没有React钩子，我将使用componentDidUpdate并手动检查sortOrder或data是否已更改，并对新的this.setState做sortedData。看起来它做类似的事情

Answer 1

您的示例应该起作用，这就是按顺序进行的操作，例如，当您通过新的data或使用setSortOrder时。

1-您进入了钩子的代码

2-您使用setSortedData钩子来更新其sortedData状态

3-它向您的组件返回一个过时的sortedData（因为在修改之前，它是从useState读取的）

4-对setSortedData的调用开始，更改状态下的数据，触发组件的新渲染，该渲染将再次使用您的钩子，并且该钩子将提供正确版本的{{1 }}。

简而言之，您将获得一个额外的渲染。如果您想避免这种情况，可以使用sortedData，如下所示：

useMemo

您的组件将立即获得排序的数据，而无需经历额外的渲染循环，并且您仍然具有仅在相关信息发生更改时调用排序功能的好处（function useSorting(initialSort, data) { const [sortOrder, setSortOrder] = useState(initialSort); const sortedData = useMemo(() => sortBy(sortOrder, data), [data, sortOrder]); return [sortedData, sortOrder, setSortOrder]; }，{{1} }。

如何使用React Hooks更新依赖于其他状态的状态

1 个答案: