Давайте продолжим наш разговор об инфраструктуре вокруг React. Но для начала давайте немного изменим нашу структуру и поместим компонент Article в отдельную директорию Articel, создадим ее для начала. Имя нашего компонента изменим на Index.js и добавим в него следующий код:
import CommentList from './../CommentList' import './style.css'
Далее мы добавим немного CSS в наш проект, поэтому давайте добавим класс в наш компонент:
<div className="article">
<h1 onClick = {openArticle}>{ title }</h1>
{body}
</div>Далее в этой же директории создадим файл style.css и напишем в нем:
.article {
background-color: #ddd;
}Не забудем также изменить import в ArticleList:
import Article from './Article/index'
и ArticleListOld:
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. Сделаем импорт:
import CSSTransitionGroup from 'react-addons-css-transition-group'
И добавим тэги в return таким образом:
return (
<div className="article">
<CSSTransitionGroup>
{body}
</CSSTransitionGroup>
</div>
)Как мы уже сказали CSSTransitionGroup следит за изменениями своих дочерних элементов, когда они появляются или исчезают, соответственно может анимировать это появление или исчезновение. Анимирует подставляя соответствующие классы в DOM по некоторой договоренности. У нас есть transitionName присвоим ему значение article.
<CSSTransitionGroup transitionName="article">
Теперь когда будет появляться body ему будет выставлять класс article enter и article enter active, это позволяет сделать css анимацию. Добавим следующие стили в наш CSS файл:
.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 и он будет выглядеть так:
<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 и добавим:
shouldComponentUpdate(nextProps, nextState) {
return nextProps.isOpen != this.props.isOpen
}Таким образом React дойдя до этого места, перестраивая виртуальное дерево выяснит нужно ли обновлять компонент, это произойдет в зависимости от того что вернет этот метод. Можно вообще запретить обновлять вернув False. Обычно приложения пишутся без использования этого метода. Говоря о проверках, если мы захотим сделать ее более продуманной и напишем что-то вроде этого:
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 blog.soshace.com
