react使用Map对象缓存数据

通常大量数据需要分页渲染，page变化重新拉取新的数据。但是在页面变化时，会再次从第一页拉取数据。多次无意义请求，会造成更多的资源浪费，还会造成性能问题。

我们在项目的主页面导出一个Map对象

//App.js
export const listMap = new Map();

在数据列表页面引入Map对象，并且在列表变化时存入Map对象，再将存入的数据取出来放入useState，最后在判断Map对象有当前数据时，不再重新拉取数据。

useEffect(() => {	
    if (list.length > 0) {
		listMap.set('list', JSON.stringify(list))
	}
}, [list])


useEffect(() => {
	if ((!localList && getToken()) || refresh || page) {
			getList()
			if (refresh) {
				setRefresh(false)
			}
	}
}, [getToken(), refresh, localList,page])

通过Map缓存数据，不仅节省了网络资源，还能提升用户的使用体验