React и данные: Эффективные способы хранения и изменения стейта

Transcript

3. Evil Martians
4. Evil Martians
5. Что я делаю
9. Дерево из нескольких сотен компонентов тормозит если его специально не оптимизировать: —  паузы при вводе данных в <input /> , —  паузы перед выставлением чекбоксов; —  паузы при открытии попапов. Проблема 9
10. —  Чтобы понять что обновилось на странице надо пересчитать VirtualDOM. —  Пересчет и сравнение VirtualDOM не бесплатное. —  Не всегда можно избежать вставок нового HTML. Чтобы уменьшить количество вставок и пересчетов надо понимать как React работает. Почему? 10
11. Как работает рендер в React
12. // В JSX <div className='cn'> Content! </div> // В JavaScript React.createElement( 'div', { className: 'cn' }, 'Content!' ); React Element КАК РАБОТАЕТ РЕНДЕР В REACT 12
13. // В JSX <div className='cn'> Content 1! <br /> Content 2! </h1> // В JavaScript React.createElement( 'div', { className: 'cn' }, 'Content 1!', React.createElement('br'), 'Content 2!' ) React Element КАК РАБОТАЕТ РЕНДЕР В REACT 13
14. Допустимые значения: —  false, null, undefined, и true; —  строки; —  массивы; —  React Element; —  React Component. React Element children КАК РАБОТАЕТ РЕНДЕР В REACT 14
15. function Table({ rows }) { return rows .map(row => ( <tr key={row.id}> <td>{row.title}</td> </tr> )); }; React Component КАК РАБОТАЕТ РЕНДЕР В REACT 15
16. // В JSX <Table rows={rows} /> // В JavaScript React.createElement( Table, { rows: rows } ) React Component КАК РАБОТАЕТ РЕНДЕР В REACT 16
17. function Table({ rows }) { /* ... */ } ReactDOM.render( React.createElement(Table, { rows: rows }), document.getElementById('#root') ); Вставка компонента на страницу КАК РАБОТАЕТ РЕНДЕР В REACT 17
18. function Table({ rows }) { /* ... */ } ReactDOM.render( React.createElement(Table, { rows: rows }), document.getElementById(' #root ') ); Вставка компонента на страницу КАК РАБОТАЕТ РЕНДЕР В REACT 18
19. function Table ({ rows }) { /* ... */ } ReactDOM.render( React.createElement( Table , { rows: rows }), document.getElementById('#root') ); Вставка компонента на страницу КАК РАБОТАЕТ РЕНДЕР В REACT 19
20. // Вызов функции React.createElement( Table, { rows: rows } ); // Результат вызова { type: Table, props: { rows: rows }, // ... } Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 20
21. // Вызов функции React.createElement( Table, { rows: rows } ); // Результат вызова { type : Table, props: { rows: rows }, // ... } Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 21
22. // Вызов функции React.createElement( Table, { rows: rows } ); // Результат вызова { type: Table, props : { rows: rows }, // ... } Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 22
23. // Вызов функции React.createElement( 'div', { className: 'cn' }, 'Content!' ); // Результат вызова { type: 'div', props: { className: 'cn', children: 'Content!' } } Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 23
24. // Вызов функции React.createElement( 'div', { className: 'cn' }, 'Content!' ); // Результат вызова { type: 'div', props: { className: 'cn', children : 'Content!' } } Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 24
25. // Вызов функции React.createElement( 'div', {}, 'Content 1!', 'Content 2!', ); // Результат вызова // ... props: { children : [ 'Content 1!', 'Content 2!' ] // ... Вызов React.createElement КАК РАБОТАЕТ РЕНДЕР В REACT 25
26. <table> <tr> <td>Title</td> <td>Price</td> </tr> ... </table> В итоге получается HTML КАК РАБОТАЕТ РЕНДЕР В REACT 26
27. ReactDOM.render( React.createElement(Table, { rows: rows }), document.getElementById(' #root ') ); ReactDOM.render() повторно вызванный на старом элементе запускает процесс сверки VirtualDOM дерева (reconcilation). Обновление страницы КАК РАБОТАЕТ РЕНДЕР В REACT 27
28. // Было { type: ' div ', props: { className: 'cn', children: 'Content!' } } // Стало { type: ' span ', props: { className: 'cn', children: 'Content!' } } Разный type — замена ноды КАК РАБОТАЕТ РЕНДЕР В REACT 28
29. // Было { type: 'div', props: { className: ' cn ' }, } // Стало { type: 'div', props: { className: ' cnn ' }, } Element + новые props — обновление КАК РАБОТАЕТ РЕНДЕР В REACT 29
30. // Было { type: Table , props: { // ... }, } // Стало { type: Table , props: { // ... }, } Старый Component — перезапуск рендера КАК РАБОТАЕТ РЕНДЕР В REACT 30
31. // .. props: { children : [ // elements ] }, / ... В зависимости от наличия key : —  если нет – по очереди сверху вниз, —  если есть – по ключам. массив children КАК РАБОТАЕТ РЕНДЕР В REACT 31
32. class App extends Component { state = { counter: 0 } increment = () => this.setState({ counter: this.state.counter + 1, }) render = () => (<button onClick={this.increment}> {'Counter: ' + this.state.counter} </button>) } Компоненты и state КАК РАБОТАЕТ РЕНДЕР В REACT 32
33. class App extends Component { state = { counter: 0 } increment = () => this.setState({ counter: this. state .counter + 1, }) render = () => (<button onClick={this.increment}> {'Counter: ' + this. state .counter} </button>) } Компоненты и state КАК РАБОТАЕТ РЕНДЕР В REACT 33
34. class App extends Component { state = { counter: 0 } increment = () => this. setState ({ counter: this.state.counter + 1, }) render = () => (<button onClick={this.increment}> {'Counter: ' + this.state.counter} </button>) } Компоненты и state КАК РАБОТАЕТ РЕНДЕР В REACT 34
35. this.state – запускает ререндер не всей страницы, а только текущего компонента и его детей. Компоненты и state КАК РАБОТАЕТ РЕНДЕР В REACT 35
36. Demo time
37. —  React Devtools + Highlight updates —   /?react_perf —  Chrome Devtools / Rendering / Paint Flashing Тестирование и дебаг DEMO TIME SUMMARY 37
38. Оптимизация физического ререндера
39. <div> <Message /> <Table /> </div> // ... props: { children : [ { type: Message }, { type: Table }, ] } // ... Массивы без ключей ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 39
40. // Было <div> <Message /> <Table /> </div> // Стало <div> <Table /> </div> Массивы без ключей ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 40
41. // Было props: { children : [ { type: Message }, { type: Table }, ] } // ... // Стало props: { children : { type: Table } } // ... Массивы без ключей ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 41
42. // Используем && <div> { isShown && <Message /> } <Table /> </div> // ... props: { children: [ false, { type: Table }, ] } // ... Массивы без ключей ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 42
43. HOC — функция принимающая на вход компонент и возвращающая другой компонент. function withName( Component ) { // Вычисляется name return < Component name={name} />; } Hight Order Components ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 43
44. class App extends React.Component() { render() { // Создает новый объект при каждом рендере const ComponentWithName = withName(Component); return < ComponentWithName />; } } HOC внутри рендера. Плохо ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 44
45. // Было { // Старый компонент type: ComponentWithName , props: {}, } // Стало { // Новый компонент type: ComponentWithName , props: {}, } HOC внутри рендера. Плохо ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 45
46. // Создает новый объект только один раз const ComponentWithName = withName(Component); class App extends React.Component() { render() { return < ComponentWithName />; } } HOC вне рендера. Хорошо ОПТИМИЗАЦИЯ ФИЗИЧЕСКОГО РЕРЕНДЕРА 46
47. Оптимизация VirtualDOM
48. —  componentWillReceiveProps() —  shouldComponentUpdate() —  componentWillUpdate() —  render() —  componentDidUpdate() Жизненный цикл компонента ОПТИМИЗАЦИЯ VIRTUALDOM 48
49. —  componentWillReceiveProps() —   shouldComponentUpdate() —  componentWillUpdate() —  render() —  componentDidUpdate() Жизненный цикл компонента ОПТИМИЗАЦИЯ VIRTUALDOM 49
50. class TableRow extends React.Component { shouldComponentUpdate (nextProps, nextState) { const { props, state } = this; return !shallowEqual(props, nextProps) && !shallowEqual(state, nextState); } render() { /* ... */ } } shouldComponentUpdate() ОПТИМИЗАЦИЯ VIRTUALDOM 50
51. class TableRow extends React.Component { shouldComponentUpdate(nextProps, nextState) { const { props, state } = this; return ! shallowEqual (props, nextProps) && ! shallowEqual (state, nextState); } render() { /* ... */ } } shouldComponentUpdate() ОПТИМИЗАЦИЯ VIRTUALDOM 51
52. Картинка из Документации React
53. —   React.PureComponent — React Component с добавленным shouldComponentUpdate через shallowEqual. PureComponent ОПТИМИЗАЦИЯ VIRTUALDOM 53
54. // Так PureComponent не будет работать <Table rows={rows.map(/* ... */)} style={ { color: 'red' } } onUpdate={() => { /* ... */ }} /> Фунции, объекты и массивы ОПТИМИЗАЦИЯ VIRTUALDOM 54
55. Demo time 2.0
56. —   shouldComponentUpdate может выполняться дольше рендера – не делайте все компоненты PureComponent . —  Только ключевые компоненты на пути апдейта. Когда и где использовать shouldComponentUpdate DEMO TIME 2.0 SUMMARY 56
60. Организация данных
61. —  Изменения элемента массива или объекта всегда меняют всех его родителей. Изменение родителей ведет к перерендеру. Чем меньше родителей тем лучше. —  Чем ниже в дереве компонентов происходит апдейт, тем меньшую часть дерева надо перерендеривать. —  Чем проще props, тем быстрее их сравнивать через === . Общие требования к передаче ОРГАНИЗАЦИЯ ДАННЫХ 61
62. —  Искать в массиве нужную запись через .find() долго и дорого. Удобнее сразу обращаться по ключу. —  Работать с вложенными коллекциями сложно – лучше их вынести на один уровень и работать по отдельности. Общие требования к обновлению ОРГАНИЗАЦИЯ ДАННЫХ 62
63. { posts: [ { id: 1, comments: [ { id: 1, /* ... */ }, { id: 2, /* ... */ }, ] }, ] } Плохая структура ОРГАНИЗАЦИЯ ДАННЫХ 63
64. { posts: { 1: { id: 1, comments: [ 1, 2 ] } }, comments: { /* ... */ } } Хорошая структура ОРГАНИЗАЦИЯ ДАННЫХ 64
65. { posts: { 1: { id: 1, comments : [ 1, 2 ] } }, comments : { /* ... */ } } Хорошая структура ОРГАНИЗАЦИЯ ДАННЫХ 65
66. https://github.com/paularmstrong/normalizr —  Берем схему и плохую структуру. —  На выходе получаем хорошую. —  Перед выводом в шаблон можно сделать обратную денормализацию. Хорошая структура из плохой ОРГАНИЗАЦИЯ ДАННЫХ 66
67. Реакт позволяет прокидывать данные минуя промежуточные уровни используя context . Этим пользуются почти все популярные библиотеки: Redux, MobX, React Intl, React Router. Внимание! Не пытайтесть использовать сами, очень кривое и поломанное API. Привязка данных ко вложенным компонентам ОРГАНИЗАЦИЯ ДАННЫХ 67
68. this.context – глобальные переменные в React. < Provider store={store}> <Component> {connect(mapStateToProps)(ChildComponent)} </Component> </ Provider > Принцип работы контекста ОРГАНИЗАЦИЯ ДАННЫХ 68
69. this.context – глобальные переменные в React. <Provider store={store}> <Component> { connect (mapStateToProps)(ChildComponent)} </Component> </Provider> Принцип работы контекста ОРГАНИЗАЦИЯ ДАННЫХ 69
70. —  Достает this.context.store . —  Подписывается на обновления. —  При обновлении запускает селектор из mapStateToProps . —  Сравнивает новые props со старыми через shallowEqual . —  Изменились? Дергает this.setState() и ререндерит обернутый компонент. Упрощенный алгоритм connect() ОРГАНИЗАЦИЯ ДАННЫХ 70
72. const ConnectedFilters = connect( state => { return { filters: state.filters }; })(FIlters); connect для фильтров ОРГАНИЗАЦИЯ ДАННЫХ 72
74. { productIds : [ 1, 2, 3 ] products: { 1: { /* ... */ }, 2: { /* ... */ }, }. } connect для таблицы ОРГАНИЗАЦИЯ ДАННЫХ 74
75. const ConnectedTable = connect( state => { return { productIds: state.productIds }; })(Table); const Table = ({ productIds }) => { return productIds.map(id => <ConnectedRow id={id} />); } connect для таблицы ОРГАНИЗАЦИЯ ДАННЫХ 75
76. const ConnectedTable = connect(state => { return { productIds: state.productIds }; })(Table); const Table = ({ productIds }) => { return productIds.map(id => < ConnectedRow id={id} />); } connect для таблицы ОРГАНИЗАЦИЯ ДАННЫХ 76
77. const ConnectedRow = connect((state, ownProps ) => { return state.products[ ownProps .id]; })(Row); connect для таблицы ОРГАНИЗАЦИЯ ДАННЫХ 77
78. { products: { 1: { id: 1, variations: [ 1, 2 ], } }, variations: { /* ... */ } } Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 78
79. Три варианта: 1.  Оставить как есть и делать коннект уровнем ниже. 2.  Если нужны произвольные данные простого типа – собирать в селекторе. Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 79
80. Cобирать в селекторе: const ConnectedPost = connect((state, ownProps) => { const post = state.posts[ownProps.id]; const commentLink = getCommentLink(state, post.comments); return { ...post, commentLink }; })(Row); Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 80
81. Три варианта: 1.  Оставить как есть и делать коннект уровнем ниже. 2.  Если нужны произвольные данные простого типа – собирать в селекторе. 3.  Если нужны произвольные данные сложного типа – areStatePropsEqual . Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 81
82. Используем areStatePropsEqual: // Сложный объект с использованием .map() или Object.assing() function prepareConnectedPost(state, id) { /* ... */ } const ConnectedPost = connect((state, ownProps) => { return prepareConnectedPost(state, ownProps.id); })(Row); Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 82
83. Используем areStatePropsEqual: // Сложный объект с использованием .map() или Object.assing() function prepareConnectedPost (state, id) { /* ... */ } const ConnectedPost = connect((state, ownProps) => { return prepareConnectedPost (state, ownProps.id); })(Row); Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 83
84. Используем areStatePropsEqual: connect( mapStateToProps, mapDispatchToProps, mergeProps, options )(Component) Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 84
85. Используем areStatePropsEqual: const options = { areStatePropsEqual : (oldProps, newProps) => { return shallowEqual(oldProps, newProps); }, }; Что с вложенными коллекциями? ОРГАНИЗАЦИЯ ДАННЫХ 85
86. Выносим селектор в редюсер и кешируем результат: { postIds: [ /* ... */ ], posts: { /* ... */ }, cachedPosts : { /* ... */ }, } Что делать если селекторов много и они дорогие? ОРГАНИЗАЦИЯ ДАННЫХ 86
87. + Очень быстрое сравнение. + Не меняются, если не изменились зависимые данные. – Две копии данных в строе. – Легко забыть обновить. – Разные версии под разные компоненты. Кеширование селекторов ОРГАНИЗАЦИЯ ДАННЫХ 87
88. —  Обязательно read-only. —  В связаных коллекция оставлять ссылку на основную – если после обновления комментария нужно обновить в пост, то в коллекцию comment имеет смысл добавить postId . —  Разбиваем генерацию по уровням – comment дергает post , post может дергать что‑то еще. Правила работы с кешем ОРГАНИЗАЦИЯ ДАННЫХ 88
89. Результаты оптимизации
90. Заключение
91. 1.  Сначала профилирование: React DevTools, /?react_perf. 2.   Тормозит? Смотрим базовые ошибки и shouldComponentUpdate. 3.   Еще тормозит? Разносим коннекты и нормализируем данные. 4.   Еще торомзит? Пробуем кешировать результат селекторов. 5.  Радуемся. Или плачем. Заключение 91