react-hooks
react-hooks copied to clipboard
Add a computed array hook
在某些时候,我们已经有了一个数组,但要对这个数组做额外的修改(对应derivedState
),但当这个原始数组变化时,我们的额外修改还要保持住。
场景一:
有一个列表,并且可以新增条目,新增的条目会临时放在列表的最上方向。无论列表是否切换页码、排序,新增条目要保持。
场景二:
在无限滚动加载的列表中,删除了某些项,此时再滚动增加新内容后,要依然保持删除的项不会出现。
这种情况下,useDerivedState
是没法用的,因为原始数组变化(翻页、新加载内容)后,就会变成新的数组,原来的新增、删除等操作都没了
所以我们需要一个useComputedArray
,基于一个原始数组,并在内部以“操作”的形式记录对它的修改,无论原始数组怎么变,都可以把“操作”覆盖上去保留