React-window: useMemo dentro del componente _row_ cuando el padre vuelve a renderizar
Descubrí que useMemo ayuda a evitar (completamente) volver a renderizar todas las filas a medida que la lista se desplaza y me gustaría que esto suceda también cuando el componente principal (que contiene la lista) se vuelva a renderizar.
Manifestación:
https://codesandbox.io/s/v8k75vw0v0
Verá que a medida que se desplaza, el mensaje de registro Actual Row ocurre solo cuando se está construyendo una nueva fila.
Este no es el caso cuando hace clic en el botón Rerender parent .
En contraste, FakeList puede permitir que la _row_ haga uso de useMemo usando _row_ como una función en lugar de un componente.
Así que supongo que esto es más una pregunta sobre cómo aprovechar al máximo useMemo.
marian-c
Todos 3 comentarios
¿Leíste esta parte de los documentos? https://react-window.now.sh/#/examples/list/memoized -list-items
Hay dos opciones de memorización integradas:
Tampoco parece que su ejemplo lo use, lo que provocará re-renderizaciones innecesarias debido a la forma en que react-window administra su caché de estilo.
Creo que este problema no requiere ningún cambio por parte de esta biblioteca, así que la cerraré. Podemos hablar más si tiene preguntas de aclaración.
bvaughn
en 19 feb. 2019
Hola de nuevo,
Mi ejemplo no fue el más elocuente para lo que intenté expresar, pero creo que ahora puedo:
A partir de su ejemplo (lista memoized-material), en la parte superior de la única representación del _rows_ que están a punto de salir a la luz, quiero minimizar también los renders cuando _activate_ un artículo (en la actualidad, cuando se hace clic en un elemento para activarlo , todas las _rows_ en la vista se vuelven a renderizar).
Finalmente lo logré usando itemData prop en FixedSizeList (esto me permite evitar un cierre anidado); esto a su vez me permite usar useMemo .
Este problema debería permanecer cerrado, pero creo que es un ejemplo / ejercicio de optimización interesante y agradecería más aportes de usted.
El resultado está aquí: https://codesandbox.io/s/rr7w89w3q
Evito los EXPENSIVE RENDER a costa de una envoltura: CHEAP PREP .
Gracias por el esfuerzo que pusiste en esta biblioteca.
marian-c
en 19 feb. 2019
Sí, eso tiene sentido. Si itemData cambia, entonces _intencionalmente_ romperá el caché del elemento. En la mayoría de los casos, esto es lo que desea hacer para evitar datos obsoletos. Si sabe que esto no es cierto para un caso de uso particular, entonces alguna lógica personalizada como la que ha hecho parece apropiada. 👍
bvaughn
en 19 feb. 2019
Temas relacionados
Kizmar
·
3Comentarios
janhesters
·
3Comentarios
gonuit
·
3Comentarios
davalapar
·
3Comentarios
delateurj
·
3Comentarios
Comentario más útil
¿Leíste esta parte de los documentos? https://react-window.now.sh/#/examples/list/memoized -list-items
Hay dos opciones de memorización integradas:
React.memoTampoco parece que su ejemplo lo use, lo que provocará re-renderizaciones innecesarias debido a la forma en que react-window administra su caché de estilo.
Creo que este problema no requiere ningún cambio por parte de esta biblioteca, así que la cerraré. Podemos hablar más si tiene preguntas de aclaración.