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

问题描述 投票:2回答:1

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

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并手动检查是否更改了sortOrderdata并使用新的this.setStatesortedData。看起来它做了类似的事情

reactjs react-hooks
1个回答
2
投票

你的例子应该有效,这就是按顺序发生的事情,例如当你传递新的data或者你使用setSortOrder时。

1 - 你到达钩子的代码里面

2 - 你勾使用setSortedData更新它的sortedData状态

3 - 它将陈旧的sortedData返回到您的组件(因为它在被修改之前从useState读取)

4 - 对setSortedData的调用启动,更改状态中的数据,触发组件的新渲染,这将再次使用您的钩子,钩子将提供正确版本的sortedData

简而言之,您有一个额外的渲染。如果你想阻止它,你可以使用useMemo,如下:

function useSorting(initialSort, data) {
  const [sortOrder, setSortOrder] = useState(initialSort);
  const sortedData = useMemo(() => sortBy(sortOrder, data), [data, sortOrder]);

  return [sortedData, sortOrder, setSortOrder];
}

您的组件将立即获得已排序的数据,而无需经过额外的渲染循环,并且您仍然可以在相关信息发生变化时调用排序函数(datasortOrder)。

© www.soinside.com 2019 - 2024. All rights reserved.