Большинство современных 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
библиотеки. И, конечно, правила
оптимизации.

6. REACT

7. JSX
JSX является синтаксическим сахаром
для функции React.createElement

8. 8

9. 9

10. React.createElement
10
React.createElement(
component,
config,
...children
)

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. 14

15. 15

16. В итоге мы получаем html
16

17. Сравнение VirtualDOM
Самое важное что нужно понимать это как
сравниваются children

18. Сравнение children
18
• С помощью строгого сравнения, если это не массив
• Если это массив, то сравнение происходит от начала.
Удаляются и рендерятся заново те елементы, которые
находились после удалённого елемента, если нет key
• По key, если он есть

19. 19

20. 20

21. 21

22. 22
NOTE: Не используйте index элемента массива в качестве key т.к. при удалении
одного элемента все последующие получат новый key что приведёт к полному
ререндеру следующих элементов

23. REDUX
Это б иблиотека для управления состоянием в приложении.

24. REDUX
24

25. REDUX
25
В 2к18 уже не стоит рассказывать как он работает и вы
сами можете посмотрить на ютубе :)

26. REACT-REDUX
Это б иблиотека для б индинга redux store’a к react компонентам.
О на использует React Context AP I, подписы вается на изменение
redux стора и передаёт нуж ны е данны е в компонент с помощью
функции connect

27. CONNECT
27

28. 28

29. OPTIMIZATION

30. МЫ МОЖЕМ ОПТИМИЗИРОВАТЬ
• Избыточные перерисовки в DOM дереве
• Избыточные сравнения Virtual DOM
• Структуру state’а
• Селекторы
30

31. ПЕРЕРИСОВКИ В DOM ДЕРЕВЕ
31
Избыточные перерисовки происходят
тогда, когда был вызван метод рендер
компонента, у которого props не
менялись и VirtualDOM должен был
быть таким же, но…

32. 32

33. 33
Можно записать массив/объект в переменную и
вынести её за пределы компонента или создавать их
в селекторе.

34. 34

35. ИЗБЫТОЧНЫЕ СРАВНЕНИЯ VIRTUAL DOM
35
Мы можем избежать создания нового
VirtualDOM, а затем его сравнения с
текущим, если мы знаем, что они будут
равны (ничего не поменяется)

36. shouldComponentUpdate

37. 37

38. 38

39. 39

40. areStatePropsEqual

41. 41
Что бы понять как areStatePropsEqual
может нам помочь мы должны решить
небольшую задачу

42. 42

43. 43

44. 44
Cheap selector

45. 45

46. 46
Expensive selector

47. 47
И как может помочь areStatePropsEqual ?

48. 48
И как может помочь areStatePropsEqual ?

49. 49
И как может помочь areStatePropsEqual ?
Но это дорого :(

50. 50
Наилучшее применение
areStatePropsEqual это в случаях, когда
данные передаются по ссылке

51. 51

52. 52

53. 53

54. Оптимизация селектора
Когда не избежать создания новых
массивов или объектов при одних и
тех же входных аргументах селектора
мы можем…

55. 55
Мы можем мемоизировать селектор

56. 56
Берём наш expensive selector и…

57. 57
Мемоизируем

58. 58
Мемоизируем

59. 59
Мемоизируем
use reselect

60. RESELECT
Это простая би бли отека д ля созд ани я эффекти вны х селекторов

61. RESELECT
• Селекторы эффективны. Селектор не производит вычислений, пока один из его
аргументов не изменился
• Селекторы являются составными. Они могут использоваться в качестве входных для
других селекторов
61

62. 62

63. 63

64. Оптимизация state’a
Иногда с помощью правильной
структуры redux state’a можно
избежать создания новых массивов
или объектов, а также их
кэширования

65. 65

66. 66

67. 67
Сгруппировать можно внутри редьюсера

68. 68
И организовать код немного по другому

69. 69

70. 70
tracks

71. TIPS
• React perf
• React developer tools
• Не переносите логику селекторов внутрь компонентов - не сортируйте, не фильтруйте и
не создавайте новых массивов внутри компонента т.к. это задача селектора
71

72. 72
DEMO

73. И ЧТО ДАЛЬШЕ ?
• Не обязательно бежать к тимлиду и выпрашивать время на рефакторинг всего
приложения, а достаточно использовать полученные знания при написании новых
компонентов или улучшая те, с которыми работаете.
• При создании нового редьюсера подумать в каком виде лучше хранить данные в state’e
• Определить нужен ли reselect для селектора
• Как можно раньше «решить» нужно ли перерендерить компонент (areStatePropsEqual, а
не shouldComponentUpdate) если это возможно
• Перед сдачей задачи попытаться найти проблемы с помощью React Developer Tools и
React perf
73