React useMap Hook
创建一个有状态的Map
对象,并提供一组操作函数来操作它。
- 使用
useState()
钩子和Map
构造函数从initialValue
创建一个新的Map
。 - 使用
useMemo()
钩子创建一组非变异操作,用于操作map
状态变量,每次使用状态设置器创建一个新的Map
。 - 返回
map
状态变量和创建的actions
。
const useMap = initialValue => {
const [map, setMap] = React.useState(new Map(initialValue));
const actions = React.useMemo(
() => ({
set: (key, value) =>
setMap(prevMap => {
const nextMap = new Map(prevMap);
nextMap.set(key, value);
return nextMap;
}),
remove: (key, value) =>
setMap(prevMap => {
const nextMap = new Map(prevMap);
nextMap.delete(key, value);
return nextMap;
}),
clear: () => setMap(new Map()),
}),
[setMap]
);
return [map, actions];
};
const MyApp = () => {
const [map, { set, remove, clear }] = useMap([['apples', 10]]);
return (
<div>
<button onClick={() => set(Date.now(), new Date().toJSON())}>添加</button>
<button onClick={() => clear()}>重置</button>
<button onClick={() => remove('apples')} disabled={!map.has('apples')}>
移除苹果
</button>
<pre>
{JSON.stringify(
[...map.entries()].reduce(
(acc, [key, value]) => ({ ...acc, [key]: value }),
{}
),
null,
2
)}
</pre>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);