Эта статья предназначена для тех из вас, кто хочет перейти в React с очень важными знаниями JavaScript (JS), чтобы помочь читать и даже начать писать код.

Начнем хакать знания.

Объектно-ориентированность и модульность

Объекты

Когда мы запустим этот простой код, мы увидим…

Мы только что создали объект леди, у которого есть 2 метода: Talk и Introduction, которые написаны с разным синтаксисом.

Первый метод (talk) использует старый способ определения метода. С другой стороны, метод introduce использует более чистый и простой синтаксис, введенный начиная с ES6.

С тем, как мы определяем метод talk, мы также можем видеть, что функция является объектом в JS.

Классы и наследование

Не требующий пояснений код определения классов и наследования.

Почему здесь важно наследование? Мы испытаем многое из этого в React, когда унаследуем базовые компоненты React.

Модули

Теперь у нас будет несколько классов в разных файлах.

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

Здесь мы заметили две концепции экспорта модуля: экспорт по умолчанию и имя. Синтаксис разницы показан ниже.

// Default -> import ... from '';
// Named -> import { ... } from '';

Когда использовать по умолчанию? Он используется, когда в файле есть один объект.

Игра с объектом

Уникальный Это

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

Как мы видим, мы получаем разные this obj между вызовом метода describe женским obj и автономным obj. Первое describecalling(index.js:8), мы получаем объект леди. Между тем, второй (index.js:11), мы получаем объект окна браузера при вызове describe как отдельный объект или вне объекта.

Почему это происходит? Потому что этот объект определяется тем, как вызывается метод.

Тогда как, если мы хотим получить объект дамы в этом случае? Давайте свяжем объект дамы.

Когда мы вызываем bind для функции describe (index.js:13), мы получаем новую функцию describe со значением этого основан на аргументе, который мы передаем.

Функция стрелки

Эти функции выше эквивалентны. С помощью стрелочной функции мы можем написать функцию с более чистым и компактным синтаксисом.

Тогда почему и когда нам нужно использовать этот синтаксис стрелочной функции? Давайте посмотрим на фильтр и карту ниже в качестве примера.

Простой и читаемый код :)

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

Мы используем setTimeout в приведенном выше примере, чтобы показать, как работает отдельная функция. Как мы видим здесь, первый this возвращает объект Window браузера, а второй возвращает объект otherLady как объект this. Здесь мы видим, как функция стрелки не сбрасывает объект this.

Деструктуризация объекта

{ name, address, phoneNumber } // object destructuring syntax

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

const name = lady.name;
const address = lady.address;
const phoneNumber = lady.phoneNumber;

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

{ name, address, phoneNumber: no } // no as an alias of phoneNumber

Оператор спреда

Оператор распространения в основном полезен, особенно в сложном проекте React. Давайте посмотрим, как выглядит синтаксис в приведенном ниже примере.

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

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

Как мы видим результат, конечный объект содержит только два свойства: name и location. Это связано с тем, что объекты lady и job имеют одно и то же свойство name, и конечный объект получит значение из объекта job (последний объект в операторе распространения ).

Здесь мы рассмотрели наиболее важные современные концепции javascript. Я считаю, что мы по-прежнему упускаем из виду множество концепций и синтаксисов в JS, поэтому я рекомендую вам использовать больше ссылок и практик для достижения лучшего знания и понимания.

Как я уже упоминал в заголовке (от Mosh), эти практики взяты из https://codewithmosh.com/, потому что я предпочитаю, как это делается, поэтому я рекомендую вам посмотреть самостоятельно, если вы хотите получить более прагматические знания, как Я получил.

Пожалуйста, дайте мне знать ваши мысли или точки зрения, связанные с этим, оставив комментарии ниже. Я буду освещать больше практик по мере того, как буду получать больше рекомендаций. Продолжай практиковаться! Ваше здоровье.