Tengo un ejemplo básico de reacción para aprender y uso material-table en uno de mis componentes. Cada vez que cambio la página y la vuelvo a abrir (desmontar y montar el componente), mi componente que contiene la tabla de materiales se carga más lentamente. Comparto mi código a continuación.
import MaterialTable from 'material-table'; const columns = [ { title: 'Id', field: 'id', hidden: true }, { title: 'Username', field: 'username' }, { title: 'Name', field: 'name' }, { title: 'Phone', field: 'phone'} ]; const tableData = [ { id: 1, username: "User-1", name: "name-1", phone: "555 444 33 22" }, { id: 2, username: "User-2", name: "name-2", phone: "111 222 33 44" }, { id: 3, username: "User-3", name: "name-3", phone: "999 999 99 99" } ]; const MTable = () => { return ( <MaterialTable title="Basic Search Preview" columns={columns} data={tableData} options={{search: true }} /> ) } export default MTableDespués de una larga búsqueda, no encontré ninguna solución, y después de un largo intento, simplemente cambié el lugar de la definición de las columnas como se muestra a continuación.
const MTable = () => { const columns = [ { title: 'Id', field: 'id', hidden: true }, { title: 'Username', field: 'username' }, { title: 'Name', field: 'name' }, { title: 'Phone', field: 'phone'} ]; return ( <MaterialTable title="Basic Search Preview" columns={columns} data={tableData} options={{search: true }} /> ) }Este cambio resuelve mi problema, pero realmente quiero saber por qué sucedió esto. Cuando hice la definición de la columna fuera del método, por qué la pérdida de memoria y el renderizado ralentizaron cada cambio de página. Al mismo tiempo, cuando pasé al método, ¿qué cambió?
material-table agrega una propiedad column.tableData a cada columna de su lista de columns , y luego hay una asignación que efectivamente hace algo como (vea el archivo data-manager.js ):
column[0].tableData.width = "calc(" + ... + column[0].tableData.width + ... + column[1].tableData.width + ... + ")" column[1].tableData.width = "calc(" + ... ... Debido a que las columnas están en el ámbito global y no se destruyen cada vez que se desmontan, esto permite que la cadena tableData.width crezca exponencialmente . Supongo que el tiempo cada vez más largo que lleva proviene de estas cada vez más numerosas invocaciones "calc()" anidadas.
Dudo en llamar a esto un error en la tabla de materiales.
Parece que material-table espera que las columnas se creen en cada representación (y no que sean persistentes). Está bien, pero al menos llamaría a este comportamiento inesperado para alguien que está acostumbrado a trabajar en React , y debería haber una advertencia sobre esto en la documentación. También creo que incluso entonces eso podría haberse implementado de manera infalible. (si alguien no está de acuerdo, me gustaría leer las razones en los comentarios)
La primera vez que se monta el componente, tableData.width es:
calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) )) / 3) Después de desmontar y un segundo montaje, el ancho tableData.width es:
calc((100% - (0px + calc((100% - (0px + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) )) / 3) + calc((100% - (0px + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) )) / 3) + calc((100% - (0px + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) + calc((100% - (0px + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3) + calc((100% - (0px)) / 3))) / 3) )) / 3) )) / 3)"La matriz de columnas debe ser estática para una instancia de tabla de materiales. Cuando se llama dinámicamente una y otra vez, la memoria se llena y finalmente se queda sin espacio.