Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Оптимизация react+redux приложений | OdessaFrontend Meetup #7

118 views

Published on

Большинство современных SPA написанны в связке react+redux, но и такое решение может начать тормозить, если его не оптимизировать. В своём докладе Валентин Череватый рассказывает правила оптимизации для написания производительных react+redux приложений.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Оптимизация react+redux приложений | OdessaFrontend Meetup #7

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

×