Когда я узнаю о React, иногда я сталкиваюсь с недостатком знаний Javascript, который нужно понимать в React. Чтобы решить такие проблемы, я хочу показать некоторые основы важных знаний Javascript.
Я надеюсь, что это поможет вам.

Модули JavaScript [ES2015]

Вы когда-нибудь задавали себе такие вопросы, как «Что такое экспорт по умолчанию?» или «Почему мне нужно использовать import { App } from './src/App.js' здесь, хотя я использую import hoge from './src/App.js'раньше?»? По крайней мере, у меня есть большой опыт. Поскольку нам приходится часто использовать эти термины импорта/экспорта в любом проекте реагирования, я думаю, мы должны знать об этом.

Функциональность модулей JavaScript, представленная в ES2015, позволяет импортировать и использовать внешние ресурсы.
Это функция JavaScript, а не уникальная для React, платформы JavaScript.

Модули используются для обслуживания, пространства имен и повторного использования.

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

Эти модули JavaScript соответствуют одному файлу JavaScript, а содержащиеся в нем переменные и функции можно экспортировать вовне.

Есть «Именованные» или «По умолчанию» для импорта и экспорта.

01. Именованный экспорт

Именованный экспорт может экспортировать несколько переменных и функций для каждого модуля.

02. Именованный импорт

Именованный импорт позволяет выборочный импорт по имени из заданного модуля. В следующем примере именованный импорт выполняется путем указания имени именованного экспортируемого объекта из named-export.js. За оператором импорта следует {}, который содержит имя именованного экспорта, который вы хотите импортировать. Если вы хотите импортировать несколько значений, разделите каждое имя запятой.

Именованный экспорт/импорт имеет механизм псевдонимов. Псевдонимы позволяют вам использовать псевдоним объявленной переменной для именованного экспортируемого или именованного импортируемого объекта с другим именем. Чтобы добавить псевдоним, просто напишите имя, которое вы хотите экспортировать, после «как», как показано ниже.

03. Экспорт по умолчанию

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

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

04. Импорт по умолчанию

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

По сути, экспорт по умолчанию аналогичен именованному экспорту с уникальным именем по умолчанию. Следовательно, вы также можете выполнить экспорт по умолчанию, назначив именованному экспорту псевдоним по умолчанию. Точно так же в именованном импорте имя по умолчанию соответствует импорту по умолчанию. Однако, поскольку по умолчанию используется зарезервированное слово, этот метод всегда должен иметь псевдоним с использованием синтаксиса as.

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

метод привязки

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

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

Метод связывания JavaScript позволяет вам создать новую функцию из функции, используя ключевое слово this. Чтобы понять привязку, необходимо понять поведение this в JavaScript.
В JavaScript следующие два фрагмента кода не эквивалентны.

Мы видим, что это определяется не содержимым исполняемого объекта, а тем, как он выполняется. Другими словами, содержание объекта не определяет ссылку на this. Когда выполняется «sampleB», результат не определен, поскольку this ссылается на глобальный объект (объект Window в браузере).
С помощью bind можно указать, на какой «this» имеется ссылка.

Это также объясняет различное поведение при использовании функции Arrow и стандартных функций.
Многие могут подумать, что результат один и тот же в обоих случаях, но функция Arrow не позволяет вам изменить это, даже если вы используете привязку. В результате результат до и после привязки одинаков.
Это связано с тем, что this ссылается на себя в функции Arrow.

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

Синтаксис класса

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

Класс в JavaScript — это шаблон или фактически «специальная функция» для создания объектов, и его можно определить двумя способами: как выражение класса и как объявление класса. .

01. объявление класса

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

02. выражение класса

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

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

03. Метод конструктора

Метод конструктора — это специальный метод для инициализации объекта, который будет создан в классе. Только один из них может быть объявлен в классе.

04. расширяется

Ключевое слово «расширяет» используется в объявлении класса или выражении класса для создания класса в качестве дочернего (= подкласса) другого класса. Если у подкласса есть конструктор, перед использованием this необходимо вызвать super().

05. супер

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

06. статический

«Статический метод» — это метод, который можно вызывать непосредственно из класса без создания экземпляра. По этой причине их также называют «методами класса». Ключевое слово static также может использоваться для свойств, и в этом случае они называются «статическими свойствами».

До сих пор я рассмотрел несколько знаний JavaScript, которые я действительно поставил под сомнение при изучении React.
Несмотря на то, что я думал, что выучил JavaScript, я часто осознавал недостаток знаний, когда снова вступал в контакт с его содержимым через другие фреймворки. .
Сложно понять все сразу, но при изучении нового языка может помочь вам понять его быстрее, если вы знаете хотя бы общие рамки этих знаний.