React-window: useMemo dentro do componente _row_ quando o pai renderizar novamente
Descobri que useMemo ajuda a evitar (totalmente) a re-renderização de todas as linhas conforme a lista rola e eu gostaria que isso acontecesse também quando o componente pai (que contém a lista) fosse renderizado novamente.
Demo:
https://codesandbox.io/s/v8k75vw0v0
Você verá que, conforme rola, a mensagem de log Actual Row acontece apenas quando uma nova linha está sendo construída.
Este não é o caso quando você clica no botão Rerender parent .
Em contraste, FakeList é capaz de permitir que o _row_ faça uso de useMemo usando o _row_ como uma função ao invés de um componente.
Então eu acho que esta é mais uma questão de como aproveitar ao máximo as vantagens do useMemo.
marian-c
Todos 3 comentários
Você leu esta parte dos documentos? https://react-window.now.sh/#/examples/list/memoized -list-items
Existem duas opções de memoização integradas:
Também não parece que seu exemplo usa, o que causará re-renderizações desnecessárias devido à maneira como a react-window gerencia seu cache de estilo.
Acredito que esse problema não exija nenhuma alteração por parte desta biblioteca, então vou fechá-lo. Podemos conversar mais se você tiver dúvidas de esclarecimento.
bvaughn
em 19 fev. 2019
Olá de novo,
Meu exemplo não foi o mais eloqüente para o que tentei expressar, mas acho que agora posso:
Começando com o seu exemplo (memoized-list-items), além de apenas renderizar as _rows_ que estão prestes a aparecer, quero também minimizar as renderizações quando você _ativar_ um item (atualmente, quando você clica em um item para ativá-lo , todas as _rows_ na visualização são renderizadas novamente).
Acabei conseguindo isso usando o prop itemData em FixedSizeList (isso me permite evitar um fechamento aninhado); isso, por sua vez, deixe-me usar useMemo .
Este problema deve permanecer fechado, mas acredito que seja um exemplo / exercício de otimização interessante e gostaria de receber mais informações suas.
O resultado está aqui: https://codesandbox.io/s/rr7w89w3q
Eu evito EXPENSIVE RENDER ao custo de uma embalagem: CHEAP PREP .
Obrigado pelo esforço que você colocou nesta biblioteca.
marian-c
em 19 fev. 2019
Sim, isso faz sentido. Se itemData mudar, ele irá _intencionalmente_ quebrar o cache do item. Na maioria dos casos, é isso que você deseja fazer para evitar dados obsoletos. Se você sabe que isso não é verdade para um caso de uso específico, alguma lógica personalizada como a que você fez parece apropriada. 👍
bvaughn
em 19 fev. 2019
Questões relacionadas
gonuit
·
3Comentários
Kizmar
·
3Comentários
jsu93
·
4Comentários
ivan-badmaev
·
3Comentários
ajayns
·
3Comentários
Comentários muito úteis
Você leu esta parte dos documentos? https://react-window.now.sh/#/examples/list/memoized -list-items
Existem duas opções de memoização integradas:
React.memoTambém não parece que seu exemplo usa, o que causará re-renderizações desnecessárias devido à maneira como a react-window gerencia seu cache de estilo.
Acredito que esse problema não exija nenhuma alteração por parte desta biblioteca, então vou fechá-lo. Podemos conversar mais se você tiver dúvidas de esclarecimento.