Уроки React. Урок 6.

Давайте продолжим наш разговор об инфраструктуре вокруг 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 часто ассоциируют с функциональным программированием. На каких же идеях держится функциональное программирование? Перечислим:

1. Особенности языка JavaScrypt. Функции должны быть объектами первого порядка. Т.е. вы можете присваивать их переменные, возвращать их как результат исполнения другой функции, передавать ее как аргументы.
2. Чистые функции – которые работают только с внутренними функциями. Стабильные функции, можно их использовать где угодно, все их любят.
3. Immutable данные – данные которые никогда не меняются. Это данные которые были один раз созданы и не меняются, т.е. для изменения данных в новом объекте, к примеру, будет создан новый объект с изменениями, но будет и доступ к старому.

Говоря о нашем приложении вы всегда можете написать вот такой shouldComponentUpdate в котором можно сравнить старые комментарии и новые, что ускорит работу по написанию приложения.

В домашнем задание необходимо почитать документацию  immutable.js. В следующем занятии мы уже поговорим о Redux. Также нужно будет интегрировать сторонний компонент day-picker. Его необходимо будет добавить рядом к нашему select. И отображать выбранный диапазон дат рядом с заголовком ArticleList for и даты. Это календарь где можно выбрать необходимое число, его можно будет использовать для фильтрации.

Код занятия, а также предыдущих уроков находятся тут.

We are looking forward to meeting you on our website soshace.com