Что это такое?
Я думаю, вы знаете, что существует множество советов по улучшению производительности react render, таких как useMemo.
Если вы уже читали блог Дэна, вы также должны знать другие советы, такие как «Переместить состояние вниз» и «Поднять содержимое вверх».
Блог Дэна
Но задумывались ли вы когда-нибудь, что если у вас есть сложный компонент, и у этого компонента есть список элементов (может быть десять), если вы хотите обновить один из элементов (может быть №3), то вам достаточно вызвать функцию partialRender, такую как
partialRender({3: `my new content`});
И все, вам не нужно заботиться о других оптимизациях, и это не приведет к полному повторному рендерингу.
Вот что делает usePartialRender, и иногда это немного сложно, кто-то подумает, можно ли сделать частичный рендеринг для компонента функции? Да, это действительно частичное обновление.
Какова цель usePartialRender.
-
Помочь вам обновить частичное содержимое сложного компонента без реструктуризации.
-
обеспечить простой способ обновления всего содержимого.
Быстрый обзор
- Онлайн-демонстрация: codesandbox
const [ListContent, partialRender, setRenderKeys] =
usePartialRender(
initRenderKeys,
initList
);
usePartialRender может вводить две необязательные начальные переменные или не вводить ничего.
Начальные переменные запускаются только один раз и могут лениво назначаться.
| Входной ключ | Требуемый | Описание | Ленивое присвоение | Время выполнения |
|---|---|---|---|---|
| initRenderKeys | Нет | Начальные ключи рендеринга, используются для partialRender({updateKey: updateContent}) | ()=>initRenderKeys | один |
| initList | Нет | Начальный список, который вы хотите рендерить, если ключ не существует в ключах рендеринга, он не будет показан. | ()=>initList | один |
| Выходной КЛЮЧ | Описание | Будет ли рендериться весь список? |
|---|---|---|
| ListContent | Финальное содержимое, которое вы можете использовать в рендере напрямую, например <div>{ListContent}</div> | Нет |
| partialRender | Функция частичного рендеринга, вы можете назначить только обновляемый контент | Нет |
| setRenderKeys | Это может помочь вам управлять ключами рендеринга, вам нужно назначить все ключи из списка. Это вызовет полный рендеринг, но не повлияет на рендеринг списка. | Да |
Заключение
Нет никакой магии для usePartialRender, я стараюсь сделать все автоматическим и сделать использование более удобным. usePartialRender особенно подходит для динамических дочерних чисел, я использую его в своих всплывающих компонентах, и позволяю ему собирать все плавающие DOM.
-
исходный код usePartialRender
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return/src/usePartialRender.js -
компонент всплывающего окна react
https://github.com/react-atomic/react-atomic-organism/tree/main/packages/organism-react-popup -
пакет NPM
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return