Download to read offline
Uploaded byOdessaFrontend
Оптимизация react+redux приложений | Odessa Frontend Meetup #7
Документ обсуждает оптимизацию приложений на основе React и Redux, выделяя проблемы производительности, такие как задержки при взаимодействии с компонентами. Причинами этих проблем являются избыточные перерисовки в DOM и дорогие операции сравнения Virtual DOM. Основные рекомендации включают использование мемоизации селекторов и изучение работы React и Redux для понимания оптимизации приложения.
Оптимизация react+redux приложений | Odessa Frontend Meetup #7
- 1.
- 2. ПРОБЛЕМА 2 Любое приложение, имеющеене малое количество компонентов, начинает тормозить, если его не оптимизировать
- 3. ПРОБЛЕМА • Задержка припереходе между страницами, открытием диалоговых окон и т.д. • Задержка при вводе данных в инпуты • Зависание спиннера 3
- 4. ПРИЧИНЫ • Избыточные перерисовкив DOM дереве • Избыточное сравнение VirtualDOM • Дорогие сравнения внутри shouldComponentUpdate • Глубокая вложенность state’a • Дорогие «селекторы» 4
- 5. Что необходимо ? Длятого что бы оптимизировать приложение нам нужно понимать как работает react, redux и react-redux библиотеки. И, конечно, правила оптимизации.
- 6.
- 7. JSX JSX является синтаксическимсахаром для функции React.createElement
- 8.
- 9.
- 10.
- 11. React.createElement’s component 11 Может приниматьзначения: * Element: ‘h1’, ‘div’, ‘span’ * ReactComponent: const Hello = ({ text }) => <h1>{ text }</h1>
- 12. React.createElement’s config 12 Confing –это просто старые добрые props :)
- 13. React.createElement’s children 13 Может приниматьзначения: • false • true • null • undefined • String • Array • ReactElement • ReactComponent
- 14.
- 15.
- 16. В итоге мыполучаем html 16
- 17. Сравнение VirtualDOM Самое важноечто нужно понимать это как сравниваются children
- 18. Сравнение children 18 • Спомощью строгого сравнения, если это не массив • Если это массив, то сравнение происходит от начала. Удаляются и рендерятся заново те елементы, которые находились после удалённого елемента, если нет key • По key, если он есть
- 19.
- 20.
- 21.
- 22. 22 NOTE: Не используйтеindex элемента массива в качестве key т.к. при удалении одного элемента все последующие получат новый key что приведёт к полному ререндеру следующих элементов
- 23. REDUX Это б иблиотекадля управления состоянием в приложении.
- 24.
- 25. REDUX 25 В 2к18 ужене стоит рассказывать как он работает и вы сами можете посмотрить на ютубе :)
- 26. REACT-REDUX Это б иблиотекадля б индинга redux store’a к react компонентам. О на использует React Context AP I, подписы вается на изменение redux стора и передаёт нуж ны е данны е в компонент с помощью функции connect
- 27.
- 28.
- 29.
- 30. МЫ МОЖЕМ ОПТИМИЗИРОВАТЬ •Избыточные перерисовки в DOM дереве • Избыточные сравнения Virtual DOM • Структуру state’а • Селекторы 30
- 31. ПЕРЕРИСОВКИ В DOMДЕРЕВЕ 31 Избыточные перерисовки происходят тогда, когда был вызван метод рендер компонента, у которого props не менялись и VirtualDOM должен был быть таким же, но…
- 32.
- 33. 33 Можно записать массив/объектв переменную и вынести её за пределы компонента или создавать их в селекторе.
- 34.
- 35. ИЗБЫТОЧНЫЕ СРАВНЕНИЯ VIRTUALDOM 35 Мы можем избежать создания нового VirtualDOM, а затем его сравнения с текущим, если мы знаем, что они будут равны (ничего не поменяется)
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. 41 Что бы понятькак areStatePropsEqual может нам помочь мы должны решить небольшую задачу
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. 47 И как можетпомочь areStatePropsEqual ?
- 48. 48 И как можетпомочь areStatePropsEqual ?
- 49. 49 И как можетпомочь areStatePropsEqual ? Но это дорого :(
- 50. 50 Наилучшее применение areStatePropsEqual этов случаях, когда данные передаются по ссылке
- 51.
- 52.
- 53.
- 54. Оптимизация селектора Когда неизбежать создания новых массивов или объектов при одних и тех же входных аргументах селектора мы можем…
- 55. 55 Мы можем мемоизироватьселектор
- 56. 56 Берём наш expensiveselector и…
- 57.
- 58.
- 59.
- 60. RESELECT Это простая библи отека д ля созд ани я эффекти вны х селекторов
- 61. RESELECT • Селекторы эффективны.Селектор не производит вычислений, пока один из его аргументов не изменился • Селекторы являются составными. Они могут использоваться в качестве входных для других селекторов 61
- 62.
- 63.
- 64. Оптимизация state’a Иногда спомощью правильной структуры redux state’a можно избежать создания новых массивов или объектов, а также их кэширования
- 65.
- 66.
- 67. 67 Сгруппировать можно внутриредьюсера
- 68. 68 И организовать коднемного по другому
- 69.
- 70.
- 71. TIPS • React perf •React developer tools • Не переносите логику селекторов внутрь компонентов - не сортируйте, не фильтруйте и не создавайте новых массивов внутри компонента т.к. это задача селектора 71
- 72.
- 73. И ЧТО ДАЛЬШЕ? • Не обязательно бежать к тимлиду и выпрашивать время на рефакторинг всего приложения, а достаточно использовать полученные знания при написании новых компонентов или улучшая те, с которыми работаете. • При создании нового редьюсера подумать в каком виде лучше хранить данные в state’e • Определить нужен ли reselect для селектора • Как можно раньше «решить» нужно ли перерендерить компонент (areStatePropsEqual, а не shouldComponentUpdate) если это возможно • Перед сдачей задачи попытаться найти проблемы с помощью React Developer Tools и React perf 73