React для разработчиков Vue - Часть 1

React менее категоричен в отношении файловой структуры. Это не мешает нам создавать отдельные файловые компоненты, мы можем писать все на Javascript, то есть шаблон на JSX и стили в CSS-in-JS, вместо того, чтобы реализовывать шаблон в HTML и стили в SCSS.

Компоненты

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

Во Vue мы сначала регистрируем наш компонент, указав имя и объект параметров в качестве аргумента, который будет определять поведение компонента. Он почти идентичен объекту параметров в экземпляре Vue. Но вместо того, чтобы подключаться к элементу в DOM, компонент имеет свойство шаблона, определяющее структуру. Он содержит данные как функцию, которая возвращает объект данных, потому что если бы это был просто объект данных, то каждая копия компонента во всем приложении использовала бы одни и те же данные.

В React есть два типа компонентов: компоненты класса и компоненты функции.

Самый простой способ определить компонент - написать функцию JavaScript, которая принимает реквизиты и возвращает элемент React.

Поскольку функциональный компонент - это простая функция JavaScript, вы не можете использовать setState () в своем компоненте. По этой причине их также называют функциональными компонентами без сохранения состояния.

ПРИМЕЧАНИЕ. Вам нужно будет либо создать компонент класса, либо поднять состояние до родительского компонента и передать его функциональному компоненту через реквизиты, если вам нужно состояние в вашем компоненте.

Мы также можем использовать синтаксис класса для написания компонентов. Давайте посмотрим, как создать компонент класса.

Мы можем поместить сегмент кода в новый файл .js, чтобы мы могли импортировать и повторно использовать компонент. Файл должен импортировать React, потому что то, что выглядит как обычный HTML, на самом деле является JSX. Вот как выглядит тот же код после транспиляции babel:

var App = function App() {
  return React.createElement(
    “div”,
    null,
    “Hello World!!!”
  );
};

React.createElement - это причина, по которой нам нужно импортировать React в начале любого компонента.

Компонент должен включать оператор extends React.Component, который предоставляет доступ к функциям React.Component путем его наследования. Метод render() используется для возврата HTML.

Теперь в приложении React есть компонент HelloWorld, который возвращает элемент <h1>. Чтобы использовать этот компонент, его необходимо импортировать в приложение. Мы можем использовать обычный синтаксис HTML как <HelloWorld />, чтобы использовать этот компонент в приложении и отображать компонент HelloWorld в «корневом» элементе.

CSS

Однофайловые компоненты Vue имеют тег стиля, в котором мы можем использовать CSS. Добавление области в тег стиля ограничивает CSS на компонентной основе, в противном случае CSS является глобальным для всего приложения, и каждый компонент может его использовать.

Мы также можем использовать Sass, установив пакеты узлов, такие как «node-sass» и «sass-loader», и использовать компоненты вашего приложения, например:

Другой способ - использовать внешний CSS, импортировав его. Мы можем импортировать его как в тег скрипта, так и в тег стиля.

В React есть несколько способов использования CSS, первый способ - это традиционный способ, используя синтаксис импорта и импортировав CSS, как мы это делаем во Vue.

Поскольку встроенный CSS написан в объекте JavaScript, имена свойств, состоящие из двух частей, например font-size, должны быть написаны с использованием синтаксиса верблюжьего регистра.

Другой способ сделать CSS в React - использовать CSS-in-JS, мы определяем CSS, используя синтаксис JavaScript, в частности объект JavaScript.

Еще один способ добавления стилей для использования модулей CSS. Модуль CSS можно создать с расширением .module.css. Кроме того, мы можем использовать стиль, импортировав модуль в компонент, что позволяет нам достичь CSS с ограниченным контекстом.

Реквизит

Vue использует односторонний поток данных, что означает, что данные могут передаваться только от родительского компонента в дочерний компонент. Вы не можете передавать данные от ребенка к родителю. Мы можем передать опору из вашего компонента в дочерний компонент, например, добавив атрибут HTML. И если у нас есть значение, хранящееся в переменной, мы можем использовать «v-bind», который сообщает Vue о необходимости привязки выражения Javascript к prop.

Во-первых, нам нужно, чтобы компонент слушал опору, добавив раздел props в определение компонента. Мы также можем установить значение по умолчанию для пропса, установить его как обязательное, а также проверку для реквизита.

В React нет большой разницы в синтаксисе props, компонент получает аргумент как объект props. Вместо строк можно также отправлять переменные или объекты, указав имя переменной в фигурных скобках. (Предположим, у нас есть компонент «Пользователь», которому мы передаем значения как свойства)

В React не нужно указывать принимаемые реквизиты, однако их нужно сделать более явными и удобочитаемыми. Мы можем использовать официальный пакет React prop-types, который когда-то был встроен в React для проверки свойств.

npm install prop-types

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

Состояние

Во Vue состояние определяется в data методе, где оно возвращается как объект. Наличие данных в качестве функции позволяет отдельным компонентам иметь отдельное внутреннее состояние без необходимости полностью повторно создавать экземпляр всего компонента и предотвращает совместное использование данных между всеми экземплярами. Vue не заставляет состояние быть неизменным, в отличие от React, его можно изменить напрямую.

<template>
  <p>The message is {{ message }}</p>
<template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: ''
    }
  }
}
</script>

С React совсем другая история, состояние определяется как объект в конструкторе. Мы также можем определить его вне конструктора, я предпочитаю использовать этот способ, так как он меньше кода и работает так же. React использует более функциональный подход и не позволяет напрямую изменять состояние, вместо этого он использует функцию setState() и передает состояние, которое нужно изменить, как объект, а компонент повторно визуализируется всякий раз, когда изменяется объект состояния.

На объект state можно ссылаться в любом месте компонента, используя синтаксис this.state.propertyname.

Методы / обработчики событий

Мы определяем методы в объекте methods, и они вызываются с использованием любых обработчиков событий, например v-on:click, например <button v-on:click="someMethod">Invoke someMethod function</button>. Даже аргументы могут быть переданы методам во время вызова, например <button v-on:click="someMethodWithArguments('This is an argument')">Invoke someMethod function</button>.

В React методы определены так же, как и в обычном JavaScript, однако вы должны использовать синтаксис стрелки, чтобы правильно привязать ключевое слово «this» для любого настраиваемого метода. Ключевое слово this не определено по умолчанию в компонентах класса, поэтому в обычных функциях ключевое слово this представляет объект, который вызвал метод, который может быть глобальным объектом окна, кнопкой HTML или чем-то еще. Чтобы использовать обычную функцию вместо стрелочных функций, мы должны привязать this к экземпляру компонента, используя метод bind(). Мы даже можем передать аргументы методу bind().

События React записываются в синтаксисе camelCase (onClick вместо onclick), а обработчики событий записываются в фигурные скобки (onClick={someMethod} вместо onClick="someMethod()").

Vue достаточно умен, чтобы знать, что такой метод, как this.anotherMethod('argument'), должен вызываться только при возникновении события onClick. Где, как в React, мы должны заключить событие в стрелочную функцию, иначе мы получим следующую ошибку.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

ПРИМЕЧАНИЕ. Метод был изменен с this.method() на this.method или {()=> this.method()}, чтобы избежать таких ошибок.

Мы рассмотрели стиль кода, компоненты, CSS, свойства, состояние и обработку событий в первой части этой статьи. Несколько других тем, а именно управление состоянием и жизненный цикл компонентов, рассматриваются в части второй.

Francium Tech - это технологическая компания, специализирующаяся на поставке программного обеспечения высочайшего качества и масштабируемости на экстремальных скоростях. Цифры и размер данных нас не пугают. Если у вас есть какие-либо требования или вы хотите бесплатно проверить работоспособность ваших систем или архитектуры, напишите письмо на адрес [email protected], мы свяжемся с вами!