我有一个动态列表,它有一个状态filters
:
const [filters, setFilters] = useState([])
该列表封装在一个名为ListContext
的上下文中,并公开一个名为registerFilter
的方法。
开发人员可以使用registerFilter
向我的列表中添加任意数量的过滤器。
每个过滤器使用该registerFilter
来注册自身。
现在,这就是我被卡住的地方。我想只有在所有的过滤器都注册后才能做一些事情。我该怎么做呢?
例如,假设一个开发人员想在我的列表中添加两个过滤器,分别是头衔、姓名和年龄。
我可以使用一个效果来对filters
变化做出React:
useEffect(() => {
// I know filters are changed, but how can I know that it's the end of them?
someMethodToBeRunOnlyWhenAllFiltersAreAdded() // this is now called 3 times for title, name, and age
}, [filters])
我怎样才能解决这个问题?
1条答案
按热度按时间3qpi33ja1#
我认为这里要走的路,只是使用内置的useMemo:
假设过滤器数组是上下文保存组件中的一个状态,在更新的react版本(18+)中,状态更新是自动批处理的,并且当过滤器同步更新时,执行过滤器的函数只会被调用一次。
https://beta.reactjs.org/blog/2022/03/08/react-18-upgrade-guide#automatic-batching
还要注意的是,在StrictMode中,react会在开发期间的挂载过程中渲染所有useEffects和useMemo等两次,以更早地显示卸载/重新挂载错误。