React: некоторые фишки и подходы | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Backend-разработчик на PHP Алгоритмы и структуры данных Team Lead Архитектура и шаблоны проектирования Разработчик IoT C# Developer. Professional HTML/CSS
-11%
C# ASP.NET Core разработчик
-5%
Kotlin Backend Developer
-8%
iOS Developer. Professional
-8%
Symfony Framework Unity Game Developer. Basic JavaScript Developer. Professional Android Developer. Basic JavaScript Developer. Basic Java Developer. Professional Highload Architect Reverse-Engineering. Professional Java Developer. Basic Web-разработчик на Python Framework Laravel Cloud Solution Architecture Vue.js разработчик Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив "Tarantool" PHP Developer. Basic
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK Administrator Linux. Professional Дизайн сетей ЦОД Разработчик IoT PostgreSQL Экспресс-курс "Версионирование и командная работа с помощью Git"
-30%
Microservice Architecture Highload Architect MS SQL Server Developer Разработчик программных роботов (RPA) на базе UiPath и PIX Разработчик голосовых ассистентов и чат-ботов Administrator Linux. Advanced Infrastructure as a code Супер-практикум по использованию и настройке GIT Administrator Linux.Basic Экспресс-курс «IaC Ansible» Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» Основы Windows Server
Корпоративные курсы
Безопасность веб-приложений IT-Recruiter Дизайн сетей ЦОД Компьютерное зрение Разработчик IoT Вебинар CERTIPORT Machine Learning. Professional
-6%
NoSQL Пентест. Практика тестирования на проникновение Java QA Engineer. Базовый курс Руководитель поддержки пользователей в IT
-8%
SRE практики и инструменты Cloud Solution Architecture Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Infrastructure as a code Супер-практикум по использованию и настройке GIT Промышленный ML на больших данных Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» BPMN: Моделирование бизнес-процессов Основы Windows Server
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Некоторые фишки React

JS_Deep_07.08_site.png

Начинающие JS-программисты часто ругают React за большое количество кода, несмотря на то, что есть масса возможностей писать его в достаточно сжатом виде. Итак перечислим некоторые из них.

Условный рендеринг

Вместо вот таких записей:

render() {
  if (flag) {
    return <div>
      <Inner />
    </div>
  } else {
    return <div/>
  }
}

всегда можно записать вот так:

render() {
  return <div>
    {flag && <Inner />}
  </div>
}

Массивы элементов

Что только не пишут с массивами:

render() {
  let list = [];
  for (let i = 0; i < this.props.text.length; ++i) {
     list.push(<li key={i}> // key нужен, чтобы отличать элементы массива
       {this.props.text[i]}
     </li>)
  }
  return <ul>
    {list}
  </ul>
}

Есть замечательный новый метод .map()

Посмотрите на аргументы передаваемой функции

render() {
  return <ul>
    {this.props.text.map((item, i) => <li key={i}>{item}</li>)}
  </ul>
}

Массив элементов из метода render

Раздутый JS-код может распространяться дальше и на HTML-разметку. Например, так случилось, что из метода render() нам необходимо вернуть несколько элементов. Часто для этого заводится элемент, в котором располагается массив элементов:

render() {
  return <div class="unnecessary">
    <div class="row1"/>
    <div class="row2"/>
  </div>
}

Вместо этого, можно использовать React.Fragment:

render() {
  return <React.Fragment>
    <div class="row1"/>
    <div class="row2"/>
  </React.Fragment>
}

или совсем сокращённую запись:

render() {
  return <>
    <div class="row1"/>
    <div class="row2"/>
  </>
}

Стрелочные компоненты

Если у вашего компонента вдруг не оказалось внутреннего state и хуков, то вместо

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.text}</div>
  }
}

можно написать стрелочный компонент (!):

const MyComponent = (props) => <div>{props.text}</div>

Стрелочные компоненты обладают рядом преимуществ, и вместо «дополнительных render-методов» в классе большого компонента вы просто можете просто вынести разметку в отдельные компоненты.

Destructuring

Данная возможность ES6 позволяет немного сократить код. И вместо этого

class MyComponent extends React.Component {
  render() {
    return <div className={this.props.className}>
      {this.props.text}
    </div>
  }
}

можно писать

class MyComponent extends React.Component {
  render() {
    const {className, text} = this.props;
    return <div className={className}>{text}</div>
  }
}

В стрелочных компонентах такое сокращение выглядит более эпично:

const MyComponent = (props) => (
  <div className={props.className}>
    {props.text}
  </div>
);

преобразуется в:

const MyComponent = ({className, text}) => (
  <div className={className}>
    {text}
  </div>
);

Redux, а точнее redux-connect

В большинстве примеров по redux-connect присутствует такая запись:

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
export default VisibleTodoList

Эту запись можно смело переписать не только таким образом:

export default connect(
  state => ({  // чтобы arrow возвращала литерал объекта - ставим скобки ()
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }),
  dispatch => ({
    onTodoClick: id => dispatch(toggleTodo(id))
  })
)(TodoList)

Но и вовсе используя декораторы:

@connect(state => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
}), dispatch => ({
    onTodoClick: id => dispatch(toggleTodo(id))
}))
export default class TodoList { // ...

Это, разумеется, только основы, и в программе курса «Разработчик JavaScript» мы разбираем многие другие интересности!

Есть вопрос? Напишите в комментариях!

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться