Пока это не объяснили так

В какой-то момент я был сбит с толку, когда дело дошло до компонентов React, и у меня было так много вопросов без ответа по ним.

Вы когда-нибудь чувствовали себя так?

Так было до тех пор, пока мне не объяснили вот так.

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

С учетом сказанного, давайте отправимся в путь!

Так что же такое компоненты React?

Компоненты React позволяют разделить пользовательский интерфейс (UI) на независимые многоразовые разделы, которые можно рассматривать изолированно.

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

Это применяется ко всем остальным компонентам.

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

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

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

Как они работают?

Самый простой способ описать компонент React, сравнивая его с функцией JavaScript.

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

Какой синтаксис?

Существует 2 типа компонентов React, каждый из которых имеет разный синтаксис.

1. Функциональные компоненты

Функциональные компоненты - это буквально функции JavaScript, посредством которых вы можете передавать реквизиты, аргумент объекта с данными, а также возвращать элемент React.

Некоторое время назад он назывался компонентом без сохранения состояния, но это изменилось из-за введенной новой функции (Реагировать на ловушки), которая позволяет нам управлять состоянием компонентов.

2. Компоненты на основе классов

Он также имеет те же свойства, что и функциональные компоненты, но в этом разница.
Компоненты на основе классов написаны в формате классов es6.

Он использует методы жизненного цикла для управления своим состоянием.

Как еще я могу использовать компоненты React?

1. Импорт и экспорт компонентов

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

Позвольте мне пояснить, что вы можете экспортировать компонент 2 способами. Эти способы имеют разные синтаксисы для их импорта.

Во-первых, вы можете экспортировать, используя код экспорта по умолчанию следующим образом;

Вы также можете экспортировать, используя код экспорта, например:

Код синтаксиса импорта для первого выглядит следующим образом;

Импортируется без фигурных скобок.

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

2. Компоненты рендеринга

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

Выполните этот шаг, и все готово

При рендеринге ваших компонентов вы должны визуализировать тег компонента.

Вам может быть интересно, что такое тег компонента.
Тег компонента записывается так:
‹Добро пожаловать /›

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

Если вы не напишете его таким образом, React обработает его как тег DOM, например тег HTML, например тег div ‹div /› или ‹welcome /› вместо тега компонента. , заставляя вашу IDE сходить с ума, и это определенно не пойдет на пользу.

Вот фрагмент кода для визуализации компонента

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

3. Правило реквизита

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

нечистая функция - полная противоположность чистой функции.

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

React довольно гибкий, но у него есть очень строгие правила.

Все компоненты React должны действовать как чистые функции по отношению к своим свойствам.

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

Консультации для разработчиков (в основном младшие разработчики и новички)

Я всегда задавал этот вопрос.

«Что мне следует изучать: функциональные или классовые компоненты?»

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

Итак, вот что я узнал.

Прочтите до конца, чтобы понять мой ответ.

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

Почему?

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

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

До сих пор я упоминал причины, по которым я предпочитаю функциональные компоненты компонентам на основе классов.

Но есть одна маленькая проблема.

Компоненты на основе классов были созданы до компонентов на основе функциональных возможностей.
Таким образом, в большинстве производственных сред (компаний), где использовался React, они, вероятно, создавали свои приложения с компонентами на основе классов.

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

Хотя я считаю, что функциональные компоненты лучше, вам нужно понимать оба, чтобы иметь преимущество.

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

Я не Сунил Сандху или Харша Вардхан, но считаю, что это реалистичный подход к этому вопросу, исходя из того, что я обнаружил.

Последние мысли

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

Надеюсь, это было для вас полезно.
Спасибо за ваше время и удачи!

Agbejule Kehinde Favor.