针对大量数据优化检查表

Question

所以我有大约1500项的清单

以下是我目前的做法

toggleOpenTimeSlot = (timeSlotId) => {
if (this.isTimeSlotOpened(timeSlotId)) {
this.setState({
openedTimeSlots: this.state.openedTimeSlots.filter(
(id) => id !== timeSlotId
),
});
} else {
this.setState({
openedTimeSlots: [...this.state.openedTimeSlots, timeSlotId],
});
}
};
isTimeSlotOpened = (timeSlotId) =>
this.state.openedTimeSlots.includes(timeSlotId);

但这种方法非常慢，每次我选中复选框，都需要一秒钟以上的时间才能重新发送

我也试过这种

toggleOpenTimeSlot = (timeSlotId) => {
if (this.isTimeSlotOpened(timeSlotId)) {
this.setState((state) => {
return {
...state,
openedTimeSlots: {
...state.openedTimeSlots,
[timeSlotId.toString()]: false,
},
};
});
} else {
this.setState((state) => {
const newOpenedTimeSlots = { ...state.openedTimeSlots };
delete newOpenedTimeSlots[timeSlotId.toString()];
return {
...state,
openedTimeSlots: newOpenedTimeSlots,
};
});
}
};
isTimeSlotOpened = (timeSlotId) =>
this.state.openedTimeSlots[timeSlotId.toString()];

但在之后，性能似乎变得更糟了

Answer 1

您应该尝试一步一步地渲染它！

试图同时显示所有复选框是一种糟糕的做法代码。

因此，如果您的用户应该滚动查看其他复选框！您只需要显示其中的10或20个，并检查用户是否在滚动视图的末尾，加载接下来的20个复选框。

通过使用这种技术，你的程序永远不会变慢。

Answer 2

将openTimeSlots作为Object而不是Array，并使用timeSlotId作为键，其值应为true/false。

toggleOpenTimeSlot = (timeSlotId) => {
this.setState({
openedTimeSlots: {...this.state.openedTimeSlots, [timeSlotId]: !this.state.openedTimeSlots[timeSlotId]
});};