SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
Большинство современных SPA написанны в связке react+redux, но и такое решение может начать тормозить, если его не оптимизировать. В своём докладе Валентин Череватый рассказывает правила оптимизации для написания производительных react+redux приложений.
Большинство современных SPA написанны в связке react+redux, но и такое решение может начать тормозить, если его не оптимизировать. В своём докладе Валентин Череватый рассказывает правила оптимизации для написания производительных react+redux приложений.
1.
ОПТИМИЗАЦИЯ
REACT-REDUX
ПРИЛОЖЕНИЙ
ВАЛЕНТИН
Front-end developer at Lohika
2.
ПРОБЛЕМА
2
Любое приложение, имеющее не малое
количество компонентов, начинает тормозить, если его
не оптимизировать
3.
ПРОБЛЕМА
• Задержка при переходе между страницами, открытием диалоговых
окон и т.д.
• Задержка при вводе данных в инпуты
• Зависание спиннера
3
4.
ПРИЧИНЫ
• Избыточные перерисовки в DOM дереве
• Избыточное сравнение VirtualDOM
• Дорогие сравнения внутри shouldComponentUpdate
• Глубокая вложенность state’a
• Дорогие «селекторы»
4
5.
Что необходимо ?
Для того что бы оптимизировать
приложение нам нужно понимать как
работает react, redux и react-redux
библиотеки. И, конечно, правила
оптимизации.
17.
Сравнение VirtualDOM
Самое важное что нужно понимать это как
сравниваются children
18.
Сравнение children
18
• С помощью строгого сравнения, если это не массив
• Если это массив, то сравнение происходит от начала.
Удаляются и рендерятся заново те елементы, которые
находились после удалённого елемента, если нет key
• По key, если он есть
22.
22
NOTE: Не используйте index элемента массива в качестве key т.к. при удалении
одного элемента все последующие получат новый key что приведёт к полному
ререндеру следующих элементов
23.
REDUX
Это б иблиотека для управления состоянием в приложении.
25.
REDUX
25
В 2к18 уже не стоит рассказывать как он работает и вы
сами можете посмотрить на ютубе :)
26.
REACT-REDUX
Это б иблиотека для б индинга redux store’a к react компонентам.
О на использует React Context AP I, подписы вается на изменение
redux стора и передаёт нуж ны е данны е в компонент с помощью
функции connect
30.
МЫ МОЖЕМ ОПТИМИЗИРОВАТЬ
• Избыточные перерисовки в DOM дереве
• Избыточные сравнения Virtual DOM
• Структуру state’а
• Селекторы
30
31.
ПЕРЕРИСОВКИ В DOM ДЕРЕВЕ
31
Избыточные перерисовки происходят
тогда, когда был вызван метод рендер
компонента, у которого props не
менялись и VirtualDOM должен был
быть таким же, но…
35.
ИЗБЫТОЧНЫЕ СРАВНЕНИЯ VIRTUAL DOM
35
Мы можем избежать создания нового
VirtualDOM, а затем его сравнения с
текущим, если мы знаем, что они будут
равны (ничего не поменяется)
60.
RESELECT
Это простая би бли отека д ля созд ани я эффекти вны х селекторов
61.
RESELECT
• Селекторы эффективны. Селектор не производит вычислений, пока один из его
аргументов не изменился
• Селекторы являются составными. Они могут использоваться в качестве входных для
других селекторов
61
64.
Оптимизация state’a
Иногда с помощью правильной
структуры redux state’a можно
избежать создания новых массивов
или объектов, а также их
кэширования
71.
TIPS
• React perf
• React developer tools
• Не переносите логику селекторов внутрь компонентов - не сортируйте, не фильтруйте и
не создавайте новых массивов внутри компонента т.к. это задача селектора
71
73.
И ЧТО ДАЛЬШЕ ?
• Не обязательно бежать к тимлиду и выпрашивать время на рефакторинг всего
приложения, а достаточно использовать полученные знания при написании новых
компонентов или улучшая те, с которыми работаете.
• При создании нового редьюсера подумать в каком виде лучше хранить данные в state’e
• Определить нужен ли reselect для селектора
• Как можно раньше «решить» нужно ли перерендерить компонент (areStatePropsEqual, а
не shouldComponentUpdate) если это возможно
• Перед сдачей задачи попытаться найти проблемы с помощью React Developer Tools и
React perf
73
0 likes
Be the first to like this
Views
Total views
390
On SlideShare
0
From Embeds
0
Number of Embeds
1
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
You also get free access to Scribd!
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.