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

logo_og
Давайте продолжим наш разговор об инфраструктуре вокруг React. Но для начала давайте немного изменим нашу структуру и поместим компонент Article в отдельную директорию Articel, создадим ее для начала. Имя нашего компонента изменим на Index.js и добавим в него следующий код:

Далее мы добавим немного CSS в наш проект, поэтому давайте добавим класс в наш компонент:

Далее в этой же директории создадим файл style.css и напишем в нем:

Не забудем также изменить import в ArticleList:

и ArticleListOld:

Далее наш разговор пойдет об анимации в 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. Сделаем импорт:

И добавим тэги в return таким образом:

Как мы уже сказали CSSTransitionGroup следит за изменениями своих дочерних элементов, когда они появляются или исчезают, соответственно может анимировать это появление или исчезновение. Анимирует подставляя соответствующие классы в DOM по некоторой договоренности. У нас есть transitionName присвоим ему значение article.

Теперь когда будет появляться body ему будет выставлять класс article enter и article enter active, это позволяет сделать css анимацию. Добавим следующие стили в наш CSS файл:

Помимо этого укажем timeouts для нашей анимации, информация доступна также в документации. Добавив эти параметры в наш index и он будет выглядеть так:

Готово! Добавили простенькую CSS анимацию.

А теперь давайте вернемся к более сложным вещам. Вспомним про  shouldComponentUpdate, метод который вызывается при обновлении вашего компонента, когда у него меняется state или props. Из названия понятно что он отвечает за то нужно ли обновляться нашему компоненту. Вспомним про принципы работы React, у нас есть наше виртуальное дерево, например у нас изменилась открытая статья. Что же происходит в этот момент? Правильно, React обновляет весь Virtual DOM. Если приложение сложное то это может привести к performance issue. Тут нам и поможет наш метод shouldComponentUpdate. Мы описываем его как обычный LifeCycle Hook. Зайдем в наш CommentList и добавим:

Таким образом React дойдя до этого места, перестраивая виртуальное дерево выяснит нужно ли обновлять компонент, это произойдет в зависимости от того что вернет этот метод. Можно вообще запретить обновлять вернув False. Обычно приложения пишутся без использования этого метода. Говоря о проверках, если мы захотим сделать ее более продуманной и напишем что-то вроде этого:

Мы уже не можем это сделать т.к. нам приходит один и тот же 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

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и ...

3. Уроки Express.js. Шаблонизация с EJS: Layout, Block, Partials

В реальной жизни у нас обычно больше, чем один шаблон. Более того, если уж так ...

24.11.2016

Уроки Express.js. Основы и Middleware. Часть 2.

Всем привет! Давайте продолжим наш урок об основах Express и Middleware. Итог (добавим в ...

0 comments

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy