Уроки React. Урок 6.
Давайте продолжим наш разговор об инфраструктуре вокруг React. Но для начала давайте немного изменим нашу структуру и поместим компонент Article в отдельную директорию Articel, создадим ее для начала. Имя нашего компонента изменим на Index.js и добавим в него следующий код:
1 2 | import CommentList from './../CommentList' import './style.css' |
Далее мы добавим немного CSS в наш проект, поэтому давайте добавим класс в наш компонент:
1 2 3 4 | <div className="article"> <h1 onClick = {openArticle}>{ title }</h1> {body} </div> |
Далее в этой же директории создадим файл style.css и напишем в нем:
1 2 3 | .article { background-color: #ddd; } |
Не забудем также изменить import в ArticleList:
1 | import Article from './Article/index' |
и ArticleListOld:
1 | import Article from './Article/index' |
Далее наш разговор пойдет об анимации в React. Как она используется? Для этого существуют соответствующие addons которые вынесены в отдельные библиотеки ‘react-addons-css-transition-group’ которые нам нужно установить:
npm install react-addons-css-transition-group –s
Как же это работает? ‘react-addons-css-transition-group’ следит за изменениям того, что происходит внутри него. Потому все, что мы хотим анимировать, мы должны обернуть в этот react-css-transition-group. Например наши статьи, а в них body. Сделаем импорт:
1 | import CSSTransitionGroup from 'react-addons-css-transition-group' |
И добавим тэги в return таким образом:
1 2 3 4 5 6 7 | return ( <div className="article"> <CSSTransitionGroup> {body} </CSSTransitionGroup> </div> ) |
Как мы уже сказали CSSTransitionGroup следит за изменениями своих дочерних элементов, когда они появляются или исчезают, соответственно может анимировать это появление или исчезновение. Анимирует подставляя соответствующие классы в DOM по некоторой договоренности. У нас есть transitionName присвоим ему значение article.
1 | <CSSTransitionGroup transitionName="article"> |
Теперь когда будет появляться body ему будет выставлять класс article enter и article enter active, это позволяет сделать css анимацию. Добавим следующие стили в наш CSS файл:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .article-enter { opacity: 0.01; } .article-enter.article-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .article-leave { opacity: 1; } .article-leave.article-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } |
Помимо этого укажем timeouts для нашей анимации, информация доступна также в документации. Добавив эти параметры в наш index и он будет выглядеть так:
1 2 3 4 5 6 | <div className="article"> <h1 onClick = {openArticle}>{ title }</h1> <CSSTransitionGroup transitionName="article" transitionEnterTimeout={500} transitionLeaveTimeout = {300}> {body} </CSSTransitionGroup> </div> |
Готово! Добавили простенькую CSS анимацию.
А теперь давайте вернемся к более сложным вещам. Вспомним про shouldComponentUpdate, метод который вызывается при обновлении вашего компонента, когда у него меняется state или props. Из названия понятно что он отвечает за то нужно ли обновляться нашему компоненту. Вспомним про принципы работы React, у нас есть наше виртуальное дерево, например у нас изменилась открытая статья. Что же происходит в этот момент? Правильно, React обновляет весь Virtual DOM. Если приложение сложное то это может привести к performance issue. Тут нам и поможет наш метод shouldComponentUpdate. Мы описываем его как обычный LifeCycle Hook. Зайдем в наш CommentList и добавим:
1 2 3 | shouldComponentUpdate(nextProps, nextState) { return nextProps.isOpen != this.props.isOpen } |
Таким образом React дойдя до этого места, перестраивая виртуальное дерево выяснит нужно ли обновлять компонент, это произойдет в зависимости от того что вернет этот метод. Можно вообще запретить обновлять вернув False. Обычно приложения пишутся без использования этого метода. Говоря о проверках, если мы захотим сделать ее более продуманной и напишем что-то вроде этого:
1 | return nextProps.isOpen != this.props.isOpen || (nextProps.comments != this.props.comments) |
Мы уже не можем это сделать т.к. нам приходит один и тот же Array на вход ссылка на nextProps.comments и this.props.comments всегда одинаковая, т.е. такими простыми способами их не сравнить. За это в React не любят mutable data types. Тем не менее решение данной проблемы есть – это immutable данные.
Посмотрим например на immutable.js. Вообще использование таких данных удобно с точки зрения самой парадигмы программирования в React. Вообще React часто ассоциируют с функциональным программированием. На каких же идеях держится функциональное программирование? Перечислим:
- Особенности языка JavaScrypt. Функции должны быть объектами первого порядка. Т.е. вы можете присваивать их переменные, возвращать их как результат исполнения другой функции, передавать ее как аргументы.
- Чистые функции – которые работают только с внутренними функциями. Стабильные функции, можно их использовать где угодно, все их любят.
- Immutable данные – данные которые никогда не меняются. Это данные которые были один раз созданы и не меняются, т.е. для изменения данных в новом объекте, к примеру, будет создан новый объект с изменениями, но будет и доступ к старому.
Говоря о нашем приложении вы всегда можете написать вот такой shouldComponentUpdate в котором можно сравнить старые комментарии и новые, что ускорит работу по написанию приложения.
В домашнем задание необходимо почитать документацию immutable.js. В следующем занятии мы уже поговорим о Redux. Также нужно будет интегрировать сторонний компонент day-picker. Его необходимо будет добавить рядом к нашему select. И отображать выбранный диапазон дат рядом с заголовком ArticleList for и даты. Это календарь где можно выбрать необходимое число, его можно будет использовать для фильтрации.
Код занятия, а также предыдущих уроков находятся тут.
We are looking forward to meeting you on our website soshace.com
0 comments