Reactjs 减速器中的复制状态导致速度缓慢
我有一个减速器,它给了我一些慢度。我已将克隆/复制部分状态的步骤确定为慢速步骤Reactjs 减速器中的复制状态导致速度缓慢,reactjs,redux,react-redux,immutability,Reactjs,Redux,React Redux,Immutability,我有一个减速器,它给了我一些慢度。我已将克隆/复制部分状态的步骤确定为慢速步骤 export default function itemReducer(state = initialState, action) { case ITEM_FETCH_IMPACT_UPDATE: { let index = action.payload.index slow step-> let items = [...state.items];
export default function itemReducer(state = initialState, action) {
case ITEM_FETCH_IMPACT_UPDATE:
{
let index = action.payload.index
slow step-> let items = [...state.items];
items[index] = {...items[index], overallIsLoading: true};
return {...state, items}
};
}
items
是一个相当大的数组,大约有300个对象,每个对象有大约10个属性。我应该如何在保持最佳Redux/React实践的同时加快速度呢?我认为复制要做两次,第一次是在声明项时,然后是在返回新状态时
如果分割状态本身不是可行的选择,那么我的建议是将复制次数减少到一次:
export default function itemReducer(state = initialState, action) {
case ITEM_FETCH_IMPACT_UPDATE:
return {
...state,
items: state.items.map((item, ind) => {
if(ind===action.payload.index){
return {
...item,
overallIsLoading:true
}
} else {
return item;
}
})
}
}
这是一个使用的用例
手工编写不可变的更新逻辑通常很困难,而且容易出错。Immer允许您使用“变异”逻辑编写更简单的不可变更新,甚至可以冻结您的开发状态以捕获应用程序中其他地方的变异我们建议使用Immer编写不可变的更新逻辑,最好作为的一部分
对于Immer drafts或任何不可变库,此类代码将成为:
const index = action.payload.index;
state.items[index].overallIsLoading = true;
它将修补状态并返回不可变的数据
请参阅上的建议。如果我用3000个项目尝试该代码,那么它仍将在微秒内运行。我不确定您是否正确识别了问题,或者只是提供了错误的代码
const a=新数组(3000).fill(“”).map(()=>
(
“ABCDEFGHIJKLMNOPQRSTUVXYZ1”+
“234567890ABCDefghijklmnopqrstuvxyz”
)
.拆分(“”)
.reduce((结果、键)=>{
结果[键]=Math.random();
返回结果;
}, {})
);
const now=performance.now();
常数b=[…a]
常数c=[…a]
常数d=[…a]
常数e=[…a]
常数f=[…a]
console.log('that take:',performance.now()-now)
这是相同的代码。。。{…state,items}