Второй день в моем журнале обучения, чтобы понять и применить React в будущих личных и рабочих веб-проектах.

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

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

import PropTypes from 'prop-types';

Понимание ключевого слова «это»

На этом этапе мы отходим от языка, специфичного для React, и рассматриваем цель «этого» в более широком контексте.

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

Существует четыре типа привязки, и у каждого есть свое применение в React:

  • Неявное связывание this передается в качестве аргумента или при возврате значения
  • Явная привязка Указывает, в каком контексте this будет использоваться вызов, применение или привязка
  • new Binding this привязан к новому создаваемому объекту
  • Привязка окна Когда «это» привязано к объекту окна или не определено, если в строгом режиме

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

Справка + чтение

React Обучение Основы React

Первоначально опубликовано с примером кода на calumryan.com