Así que tengo una lista de verificación para ~1500 elementos
así es como lo hago actualmente
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);Pero este enfoque es muy lento, cada vez que marco una casilla de verificación, se tarda más de un segundo en volver a procesar
También probé algo como esto
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()];Pero parece que el rendimiento empeora después de eso.
¡Deberías intentar renderizarlo paso a paso!
Intentar mostrar todas las casillas de verificación a la vez es un código de mala práctica.
Entonces, si su usuario debe desplazarse para ver las otras casillas de verificación. solo necesita mostrarles solo 10 o 20 de ellos y verificar si el usuario está al final de la vista de desplazamiento, cargar las siguientes 20 casillas de verificación.
Al usar esta técnica, su programa nunca se ralentizará.
Haga openTimeSlots como objeto en lugar de una matriz y use timeSlotId como clave y el valor de eso debe ser verdadero/falso.
toggleOpenTimeSlot = (timeSlotId) => { this.setState({ openedTimeSlots: {...this.state.openedTimeSlots, [timeSlotId]: !this.state.openedTimeSlots[timeSlotId] });};