Преждевременный переход на реакт может стать ошибкой и навредить вам в долгосрочной перспективе. В этом посте я перечислю 5 самых важных вещей, которые вы должны знать, чтобы вы могли быть уверены, что ваш фундамент крепок и вы сможете легко освоить реакт.
Оглавление:
-
Синтаксис
-
Манипулирование DOM и события
-
Асинхронность
-
Ключевое слово this
-
Стек вызовов
Синтаксис
Этот пункт должен быть обязательным, поскольку React – это библиотека, созданная на JavaScript. Синтаксис включает, но не ограничивается следующим: объявление функций и переменных, циклы for, операторы if, массивы, объекты, операторы и многое другое. Я бы настоятельно рекомендовал создать хотя бы один проект, (Идеи проектов), чтобы увидеть, как все эти вещи собираются вместе.
Манипулирование DOM и события
Изучение манипуляций с DOM (Document Object Model) может стать отличным способом начать “соединять” различные языки вместе и изменять их соответствующим образом. Ниже перечислены общие действия с DOM, которые вы будете выполнять примерно в 90-95% случаев:
- Создание элементов
- Добавление элементов
- Изменение атрибутов данных
- Удаление элементов
Это видео от Web Dev Simplified – отличное начало для понимания того, что такое DOM на самом деле и как правильно использовать его в определенных сценариях. Слушатели событий также важны и могут коррелировать с DOM, потому что вы, по сути, слушаете любые события, которые происходят. Например, если у меня есть форма, и я хочу получить информацию, которая была написана кем-то, я могу реализовать кнопку submit и подключить к ней слушателя событий, чтобы, как только человек нажмет на кнопку, я мог получить и сохранить эту информацию в объекте или в localStorage. Это видео также создано Web Dev Simplified, и он прекрасно объясняет концептуально и практически о слушателях событий.
Асинхронность
Это большое слово, которое может напугать некоторых людей, но все, что оно действительно делает – это ожидание завершения определенного действия перед выполнением другого действия, то есть, по сути, одно действие за один раз. Обычно вы используете обратные вызовы, обещания или ключевое слово async await для получения данных из RESTFUL API и анализа их в JSON (JavaScript Object Notation), поскольку API обычно хранятся в строковом виде. Отличным введением в эту тему является этот видеоролик от Traverse Media, в котором подробно рассматриваются обратные вызовы, обещания и async await.
Ключевое слово this
Ключевое слово this вызывает много нареканий, но на самом деле оно делает следующее:
Это ключевое слово относится к объекту, к которому оно относится.
- В одиночку this относится к глобальному объекту.
- В обычной функции это относится к глобальному объекту.
- В методе это относится к объекту-владельцу.
Вы также можете явно связать его с функцией, используя следующие методы:
-
Call() | [c]all takes (c для аргументов, разделенных запятыми). Вызванная функция
-
Bind() | возвращает новую функцию, которая может быть вызвана, она просто позволяет вам связать любой объект, который вы хотите
-
Apply() | [a]pply takes (a для массива аргументов). Вызывает функцию
По сути, это ссылка на контекст, в котором в данный момент выполняется код. Это может быть немного сложно для понимания, и в этом видео от techsith ключевое слово this хорошо раскрывается почти во всех сценариях. Причина, по которой я не буду подробно рассказывать об этом, заключается в том, что я считаю, что просмотр видео с примерами кода – лучший способ понять это.
Стек вызовов
По какой-то причине об этом не часто упоминают, но я думаю, что понимание того, как работает стек вызовов, позволит вам лучше понимать порядок вызова функций. Наличие базовых фундаментальных знаний о работе JavaScript Engine и JavaScript Runtime Environment выделит вас среди других разработчиков и очень хорошо перенесется при переходе на react. Кроме того, наличие некоторых знаний об общем цикле событий (очередь задач, очередь микрозадач и, возможно, куски) действительно поднимет вас как разработчика. Есть тонна видео на эту тему, так что не стесняйтесь выбирать то, что вам нравится.