JavaScript, который нужно знать для React

JavaScript, который нужно знать для React

От автора: одна из вещей, которые мне больше всего нравятся в React по сравнению с другими фреймворками, которые я использовал, это то, насколько вы открыты для JavaScript при его использовании. Шаблон DSL (JSX компилируется в разумный JavaScript) отсутствует, API компонентов стал проще с добавлением React Hooks, и фреймворк предлагает вам очень мало абстракций вне основных проблем пользовательского интерфейса, которые он призван решить.

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

Литералы шаблонов

Литералы шаблонов похожи на обычные строки со сверхспособностями:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

MDN: литералы шаблонов

Сокращенные имена свойств

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

MDN: инициализатор объекта Новые записи в ECMAScript 2015

Стрелочные функции

Стрелочные функции — это еще один способ написания функций в JavaScript, но они имеют несколько семантических различий. К счастью для нас в React, нам не нужно так много беспокоиться о this, если мы используем в проекте хуки (а не классы), но стрелочные функции позволяют использовать более анонимные функции и неявные возвраты, так что вы часто захотите использовать стрелочные функции.

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

MDN: стрелочные функции

Деструктурирование

Деструктурирование, вероятно, моя любимая функция JavaScript. Я деструктурирую объекты и массивы все время. Мне нравится, как это декларативно.

MDN: назначение деструктурирования

Обязательно прочитайте эту статью на MDN. Вы узнаете много нового. Когда вы закончите, попробуйте провести рефакторинг, чтобы использовать одну строку деструктурирования:

Параметры по умолчанию

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

MDN: параметры по умолчанию

Rest/Spread

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

MDN: синтаксис Spread

MDN: параметры Rest

ESModules

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

MDN: import

MDN: export

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

Тернарные операторы

Я люблю тернарные операторы. Они прекрасно декларативны. Особенно в JSX.

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

MDN: условные (тернарные) операторы

Методы массива

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

find

some

every

includes

map

filter

reduce

Вот некоторые примеры:

MDN: массивы

Promise и async/await

Это большая тема, и может потребоваться немало практики и времени, чтобы проработать ее. Promise встречаются повсюду в экосистеме JavaScript, и благодаря тому, как React укоренился в этой экосистеме, они также присутствуют везде (фактически, сам React использует promise внутри).

Promise помогают вам управлять асинхронным кодом и возвращаются из многих DOM API, а также из сторонних библиотек. Синтаксис Async / await — это специальный синтаксис для работы с promise. Они неразрывно связаны.

MDN: Promise

MDN: функции async

MDN: await

Заключение

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

Автор: Kent C. Dodds

Источник: https://kentcdodds.com

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий