Учебник по React: краткое руководство

Перевод: сумасшедший технический ботаник оригинал:woohoo.topthem.com/реагировать/реагировать…

Фронтенд и JavaScript — странный мир. Множество новых технологий, которые продолжают внедряться, высмеиваются теми, кому они не нужны, а зачастую и многим. Мы иногда ошеломлены постоянным потоком информации, репозиториев и дискуссий, всегда надеясь на что-то стабильное, вроде убежища, где мы можем немного отдохнуть. В последнее время React, похоже, вот-вот станет теплой гаванью в море эволюции JavaScript.

Имея это в виду, мы решили создать серию руководств по React, чтобы продемонстрировать его возможности и сравнить его с Angular и VueJS.

Конечно, React — не единственный вариант, но в настоящее время это одно из самых популярных, стабильных и инновационных решений, и хотя оно все еще постоянно обновляется, речь идет скорее об улучшении, чем о добавлении функций.

Реагировать в 2019 году

React— это библиотека просмотра, которая восходит к 2011 году, когда ее первый прототип назывался FaxJs и появился на Facebook. React был написан Джорданом Уоке (который также является автором вышеупомянутого прототипа) 29 мая 2013 года на сайте Launched by JSConfUS и публично выпущен на GitHub 2 июля 2013 г.

В 2014 году, когда он начал расширять сообщество и продвигать React, он продолжал набирать популярность. Однако, с моей точки зрения, 2015 год стал знаковым, когда крупные компании, такие как Airbnb и Netflix, начали любить и внедрять React. Кроме того, были иReact Native. Идея, лежащая в основе React Native, не нова, но выглядит интересно, особенно с учетом того, что ее поддерживает Facebook.

Еще одним большим изменением являетсяRedux, реализация Flux. Это делает управление состоянием более простым и удобным, что делает его наиболее успешной реализацией на сегодняшний день.

С момента его создания и до сих пор в нашем распоряжении есть много других вещей, в том числеReact tools, переписывает основной алгоритм; Fiber используется для управления версиями семантического преобразования и многого другого. На сегодняшний день мы находимся на версии 16.6.3, и новая версия с поддержкой хуков, вероятно, будет выпущена через несколько недель (она должна была поддерживаться в 16.7.0, но из-за некоторых исправлений в React.lazy версия был выпущен первым). React получил широкое признание за свою известность и стабильность.

Но что такое React?

Что ж, если вы фронтенд-разработчик и никогда об этом не слышали, я вас поздравляю, потому что это потрясающий подвиг.

Просто шучу. React — это декларативная библиотека представлений на основе компонентов, которая помогает создавать пользовательские интерфейсы. Это скорее библиотека, чем фреймворк, хотя многие изначально описывали его как последний.

Очевидно, что если бы мы добавили Redux, React Router и т. д. в React, у него было бы все необходимое для создания обычного одностраничного приложения, возможно, поэтому его иногда неправильно называют фреймворком, а не библиотекой. Собирая вместе все компоненты этой среды, термин «фреймворк» может быть немного подходящим, если вы так думаете, но сам по себе React — это просто библиотека.

Перестаньте беспокоиться о том, как классифицировать его, и сначала сосредоточьтесь на том, что делает React уникальным, на чем вы раньше не замечали. Во-первых, когда вы впервые видите React, вы думаетеJSX, потому что это первое чувство, которое вы испытываете, когда видите код. JSX — это расширение синтаксиса JavaScript, несколько похожее на HTML/XML. Говоря о React и JSX, у них есть некоторые отличия от HTML, например, классы в React — этоclassName, без табиндекса, но сtabIndex, стили принимают объекты JavaScript с именованными свойствами в стиле camelCase и т. д.

Есть некоторые нюансы, но любой должен принять их сразу. Обработка событий выполняется, например, черезonChangeа такжеonClickРеализация атрибута, эти атрибуты можно использовать для прикрепления некоторых функций к обработке событий. Кроме того, будущие компоненты можно свободно использовать повторно и настраивать с помощью реквизитов, поэтому нет необходимости писать один и тот же код несколько раз.

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello World, {this.props.name}</div>
        );
    }
}

Но на самом деле JSX не очень нужен в React. Вы можете писать обычные функции для создания элементов без использования JSX. Приведенный выше код можно использовать следующим образом.

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return React.createElement(
            'div',
            null,
            'Hello World, ',
            this.props.name
        );
    }
}

Очевидно, я не предлагаю вам использовать этот синтаксис, хотя есть ситуации, когда он может пригодиться (например, вы хотите ввести очень небольшую вещь, но не хотите менять среду сборки).

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

import React from 'react';

Фрагменты кода должны говорить сами за себя. хотя мы извлекаемComponent, по-прежнему требует React, так как Babel транспилируется поверх JSX дляReact.createElement. Поэтому, если мы не импортируем React, он потерпит неудачу. Ранее я упоминал Babel, инструмент, который помогает нам просматривать то, что еще не поддерживается в JavaScript (точнее, в браузерах), или каким-то образом расширять JavaScript (или аналогично TypeScript, различные языки, поддерживаемые Babel, начиная с Babel 7). Благодаря Бабелю:

JSX будет переведен в код, понятный браузеру.
Мы можем использовать новые функции, которые еще не реализованы в браузерах (например, атрибуты класса).
Мы можем поддерживать функции в новых браузерах, одновременно поддерживая старые функции в старых браузерах.

Короче говоря, в JavaScript сегодняшний код все равно будет работать завтра, для этого может потребоваться отдельная статья, посвященная этому. Стоит отметить, что импорт React также можно обойти некоторыми другими методами (такими как импорт ProvidePlugin через Webpack и т. д.), но из-за ограниченного места мы избегаем этого метода и предполагаем, что пользователи будут использовать Create React App (CRA) (Подробнее об этом инструменте будет сказано позже).

Еще один момент, более важный, чем сам JSX, заключается в том, что React основан на виртуальном DOM. Короче говоря, виртуальный DOM — это идеальная древовидная структура в памяти, написанная на JavaScript, которую мы позже сравним с реальной DOM.

Как это соотносится с Angular и Vue?

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

Итак, я попытаюсь интегрировать React с React, используя серию коротких вопросов и ответов.Angularа такжеVueСравнивать. Это сравнение технически актуально и не сделано субъективно.«X лучше, чем Y, потому что он использует JSX вместо шаблонов».Это сравнение не основано на личных предпочтениях. Кроме того, React очень похож на своих основных конкурентов (возможны и Angular, и Vue) по скорости и распределению памяти.статья на эту темуОтлично, но имейте в виду: большинство программ не делают подобных вещей с десятками тысяч строк данных. Таким образом, эти результаты также являются чисто скоростными экспериментами. На самом деле вы бы тоже не поставили это на первое место.

Итак, давайте рассмотрим вопросы о React и его сравнении с конкурентами:

Я хочу иметь больше возможностей для работы. Насколько популярен React?

Что ж, на это легко ответить — выбирайте React. На самом деле, я бы сказал, что в React есть от 6 до 10 других рабочих мест.раз(Возможно, разница относительно большая, на некоторых крупных сайтах она в 50 раз, а на некоторых сайтах в 6 раз), от 2 до 4 раз больше, чем у Vue, и больше, чем у Angular. правильноReact expertsпользуется большим спросом, но почему Vue так популярен на GitHub (на самом деле он получает больше звезд, чем React) без дополнительных вакансий? Я не знаю этого. [Примечание переводчика: автор — американец, и это относится к американскому рынку труда]

Я хочу, чтобы большое сообщество и множество библиотек могли быстро решать проблемы, которые могут возникнуть.Выберите React, не ищите дальше.

Легко ли им пользоваться и доставляет ли удовольствие процесс разработки?

Отчеты о состоянии JS за 2018 и 2017 годы показывают, что и React, и Vue имеют солидную репутацию, и большинство разработчиков говорят, что будут использовать его снова. У Angular, с другой стороны, есть тенденция, и с каждым годом все больше и больше людей говорят, что больше не будут его использовать.

Я хочу создать новое одностороннее приложение, но не хочу искать такую библиотеку поддержки.

Я думаю, что это, вероятно, единственная причина, по которой Angular является достойным выбором.

Я не большая компания. Но хотите быть максимально независимыми, что выбрать?

Vue — единственный автономный из нашей большой тройки. (Facebook поддерживает React, а Google — Angular.)

Самая простая и быстрая кривая обучения для начала работы?

Вью/Реагировать. Здесь я больше склоняюсь к Vue, но это только мое личное мнение. А почему? Поскольку вам не нужно знать JSX (это необязательно), в основном это просто HTML + CSS + JavaScript.

Учебное пособие по React: запуск вашей первой программы

Самый простой способ начать работу с React прямо сейчас — это использовать CRA, инструмент командной строки, который создает проекты для вас и помогает вам избежать настройки таких сред, как Webpack/Babel. Вам просто нужно полагаться на конфигурацию по умолчанию и обновлять включенный контент с течением времени. Благодаря этому вам не нужно заботиться о крупных обновлениях какой-то критической библиотеки.

Конечно, позже вы можете сделать это, запустивnpm run ejectПриезжайте "поп" сами и разберитесь со всеми деталями сами. У этого подхода есть свои преимущества, так как вы можете улучшить свое приложение, добавив вещи, которые еще не были доступны (например, декораторы), но это также может быть головной болью, поскольку для настройки множества дополнительных файлов требуется больше времени.

Итак, первое, что нужно сделать, это:

npx create-react-app {app-name}

потомnpm run startЭто завершено.

Компоненты класса и функциональные компоненты

Сначала мы должны объяснить, чем отличаются эти компоненты. В принципе каждый компонент может бытьfunctionилиclass. Основное различие между ними заключается в том, что компоненты класса имеют некоторые особенности, которых нет у функциональных компонентов: они имеют состояние и используют ссылки, жизненные циклы и т. д. Начиная с версии 16.7 мы можем использовать хуки, поэтому мы можем использовать хуки для состояния и ссылок.

Существует два типа компонентов класса:Componentа такжеPureComponent. Единственная разница между ними заключается вPureComponentВозможно поверхностное сравнение реквизита и состояния — уникальное преимущество в тех случаях, когда вы не хотите «тратить впустую» ресурсы рендеринга, когда компонент и его дочерние элементы после рендеринга оказываются в одном и том же состоянии. Однако у него есть только поверхностное сравнение; если вы хотите реализовать свое собственное сравнение (если вы передаете сложные реквизиты), просто используйтеComponentи перезаписатьshouldComponentUpdate(возвращает true по умолчанию). Начиная с версии 16.6+ нечто подобное можно использовать в функциональных компонентах — благодаряReact.memoЭтот компонент более высокого порядка по умолчанию ведет себя какPureComponent(поверхностное сравнение), он также принимает второй параметр, когда вы выполняете сравнение пользовательских реквизитов.

В общем, если вы можете использовать функциональные компоненты (при условии, что вам не нужны функциональные возможности класса), используйте их. Однако, начиная с версии 16.7.0, из-за методов жизненного цикла можно использовать только компоненты класса. Но я думаю, что функциональные компоненты более прозрачны, о них легче рассуждать и понимать.

Реагировать на методы жизненного цикла

Constructor(props)

При желании CRA делает популярным включение объявлений полей классов JavaScript по умолчанию. Нет смысла объявлять, следует ли связывать метод с помощью стрелочной функции в классе. Подобные состояния также могут быть инициализированы как свойства класса.
Используется только для локального состояния и связанных методов в классах ES6, которые инициализируют объекты.

componentDidMount()

Здесь делается вызов Ajax.
Если вам нужны прослушиватели событий, подписки и т. д., вы можете добавить их здесь.
вы можете использовать здесьsetState(но это заставляет компонент повторно отображать).

componentWillUnmount()

Очистить все, что еще происходит — например, Ajax должен быть прерван, отписаться, очистить таймеры и т. д.
не звониsetState, так как это не имеет смысла, так как компонент будет размонтирован (и вы получите предупреждение).

componentDidUpdate(prevProps, prevState, snapshot)

Выполняется, когда компонент только что был обновлен (не когда он начинает рендеринг).
Есть три необязательных параметра (предыдущий реквизит, предыдущее состояние и только если ваш компонент реализуетgetSnapshotBeforeUpdateСнимки, которые только появляются).
только еслиshouldComponentUpdateОн будет выполнен только тогда, когда вернет true.
If you use setState here, you should guard it or you will land in an infinite loop.
если вы используете его здесьsetState, он должен быть защищен, иначе он застрянет в бесконечном цикле.

shouldComponentUpdate(nextProps, nextState)

Только для оптимизации производительности.
Если он возвращает false, тоНе будетВызов рендерера.
Если переопределенный SCO - это просто поверхностное сравнение свойств/состояния, вы можете использоватьPureComponent.

getSnapshotBeforeUpdate()

Может использоваться для сохранения некоторой информации о текущем DOM, такой как текущая позиция прокрутки, которую можно использовать позже.componentDidUpdateповторно используется в , чтобы восстановить положение прокрутки.

componentDidCatch(error, info)

Где должны регистрироваться ошибки регистрации.
можно назватьsetState, но в будущих версиях будет использоваться в статических методахgetDerivedStateFromError(error)удален, он обновит состояние, вернув значение.

Есть также два статических метода, упомянутых в других абзацах.

static getDerivedStateFromError(error)

Информация об ошибках представлена здесь.
Должно возвращать значение объекта, которое будет обновлять состояние (путем отображения содержимого), которое можно использовать для обработки ошибок.
Поскольку он статичен, нет возможности получить доступ к самому экземпляру компонента.

static getSnapshotBeforeUpdate(props, state)

Следует использовать в ситуациях, когда реквизиты меняются со временем — например, согласно документам React, его можно использовать для преобразования компонентов.
Поскольку он статичен, нет возможности получить доступ к самому экземпляру компонента.

Обратите внимание, что в настоящее время доступно больше методов, но они могут быть удалены в React 17.0, поэтому я не буду упоминать их здесь.

State vs. Props

Давайте начнем сPropsНачните, потому что это легче объяснить. Реквизиты — это свойства, передаваемые компоненту, которые можно повторно использовать позже, когда компонент отображает информацию или бизнес-логику.

import React, { Component } from 'react';

export default class App extends Component {
   render() {

       return (
           <div>
               <HelloWorld name="Someone :)"/>
           </div>
       );
   }
}

const HelloWorld = (props) => <div>Hello {props.name}</div>

В приведенном выше примереnameявляется опорой. props доступны только для чтения и не могут быть изменены непосредственно в дочерних компонентах. Многие люди имеют дурную привычку копировать свойства в состояние, а затем работать с ним. Конечно, бывают случаи, когда вы хотите сделать что-то вроде «обновить начальное состояние родительского компонента после фиксации», но это очень редко — в этом случае может иметь смысл обновить начальное состояние. Кроме того, в дочерние компоненты можно передавать не только свойства, такие как строки, но и числа, объекты, функции и т. д.

prop имеет более полезную вещь под названиемdefaultProps, которое является статическим полем, которое сообщает вам, какие реквизиты компонента по умолчанию (например, когда они не передаются компоненту).

В случае «поднятия состояния», когда один компонент (родительский) имеет состояние, которое позже повторно используется его дочерними элементами (например, один дочерний элемент для отображения, а другой для редактирования), тогда нам нужно изменить функциональность из родительского компонента, переданного в дочерний компонент. Это позволяет нам обновлять локальное состояние родителя. с другой стороны,условиеявляется модифицируемым локальным состоянием, но черезthis.setStateКосвенная модификация. Если вы напрямую измените состояние, компонент не воспримет это и не будет повторно рендериться из-за изменения состояния.

**SetState** — это способ изменить объект локального состояния (выполнив неглубокое слияние), после чего компонент отвечает на него повторным рендерингом. Обратите внимание, что при использованииsetStateПозже,this.stateАтрибут не сразу будет реагировать на изменения (имеет асинхронные свойства), из соображений оптимизации можетsetStateсобрал вместе несколько экземпляров. Есть несколько способов его вызова, один из которых позволяет нам что-то делать с компонентом, как только состояние обновится:

setState({value: ‘5’})
setState((state, props) => ({value: state.name + “‘s”}))
setState([object / function like above], () => {})- Эта форма позволяет нам добавлятьcallback, вызываемый, когда состояние отображает нужные нам данные (в первом аргументе).

import React, { Component } from 'react';

export default class App extends Component {
   state = {
       name: 'Someone :)'
   }

   onClick = () => this.setState({ name: 'You' })

   render() {
       return (
           <div>
               <HelloWorld name={this.state.name} onClick={this.onClick}/>
           </div>
       );
   }
}

const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

React Context

Недавно стабильный Context API React (который был в React уже довольно давно и является экспериментальной функцией, несмотря на то, что он широко используется некоторыми из самых популярных библиотек, таких как Redux) помогает нам решить одну проблему: сверление реквизита. В двух словах, реквизиты — это способ передачи реквизитов глубоко в структуру — например, это может быть определенная тема компонента, локализация для определенного языка, информация о пользователе и т. д. До того, как появился Context (точнее, до того, как он стал неэкспериментальной фичей), он рекурсивно просверливался от родителя до последнего уровня дочернего элемента (очевидно, были также возможные Redux, чтобы исправить это). Обратите внимание, что эта функция предназначена только для решения проблемы сверления объектов и не является заменой Redux или Mobx и т. д. Конечно, если вы используете только библиотеку управления состоянием, не стесняйтесь заменять ее.

Суммировать

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