Когда я впервые столкнулся с миром кодирования, моим способом работы было выражение If Else и размещение всего кода на одной странице, и я предполагаю, что многие другие начинали с того же… утомительный путь.
Поначалу кажется, что нет проблем с размещением всего кода на одной JS-странице, но по мере того, как ваши десять строк превращаются в тридцать, а затем в сто и так далее, вы понимаете, что это чрезвычайно трудно организовать или найти что-либо, а тем более читать что-либо! Приходите компоненты React, избавляя от большого количества беспорядочного кода.
Чтобы рассказать немного предыстории, React был разработан Джорданом Уоке, инженером-программистом Facebook, в 2013 году. Как заявил reactjs.org, компоненты React реализуют метод render(), который принимает входные данные и возвращает то, что нужно отображать.
Проще говоря, компоненты React — это отдельные блоки кода, которые можно вызывать и повторно использовать в нескольких местах, избавляя от повторяющегося кода. Существует два типа компонентов: компоненты класса и компоненты функции, и сегодня я буду обсуждать с вами последний. Компоненты могут быть родительскими, дочерними или дочерними, вызывающими другие дочерние элементы (да, мы все еще говорим о коде, а не о реальных дочерних элементах). Возьмите простой пример компонента ниже:
В большей части кода, относящегося к компонентам, компонент Приложения должен быть относительно сухим и простым, с как можно меньшим количеством «пушистого» кода (как гласит известная поговорка: KISS - Keep it Simple Stupid !). Разработчики предпочитают то, что они называют сухим кодом; ваша цель – уменьшить повторение кода (Dry буквально означает "Не повторяйся" в сообществе программистов). Поскольку компонент Родительский вызывает Дочерний компонент, Приложение должно вернуть только одну строку , <Parent/>, чтобы распечатать строку "Я люблю компоненты!", отображаемую в веб-представлении. Это довольно упрощенный пример, но можете ли вы поверить, что Facebook, Instagram и Netflix сделаны из компонентов React?!
Хорошим наглядным примером может быть это дерево компонентов контактов:
Приложение (родительская функция) вызывает и возвращает контакты (дочерний компонент). Контакты также вызывают и возвращают компоненты, но на меньшем уровне; AddContact, ContactList и SearchBar. Путем упрощения или, другими словами, направления каждого компонента вниз, чтобы в основном выполнять одну «работу», код и дерево компонентов легче понимать и читать. Если бы все компоненты были закодированы и в Контактах, было бы крайне сложно перемещаться и читать все (Только представьте себе, сколько часов тратится на поиск причины одной ошибки!).
Чтобы погрузиться немного глубже, представьте, что у вас есть массив объектов, и вы хотите вернуть/рендерить каждый объект. Вы могли вернуть (каждый отдельный объект), но что, если в этом массиве 30 объектов или 130? Если вам не нравится тратить свое время впустую, простой родительский и дочерний компоненты могут легко отобразить каждый объект в массиве примерно за три строки кода (добавлено к предыдущему примеру, то есть).
Посмотрите на фрагменты кода ниже:
Если вы вызовете этот массив объектов в дочерний элемент (обычно через db.json), вы сможете отображать один объект за раз. Затем родительский компонент использует .map() для создания и сохранения нового массива объектов для рендеринга, а компонент приложения возвращает весь массив объектов на ваш экран. Хотя это звучит излишним при объяснении словами, использование компонентов таким образом экономит много времени благодаря удобочитаемости, организации и сухому кодированию.
Хорошим примером, над которым я ранее работал, было простое приложение, созданное моим партнером, чтобы помочь людям выбирать наряды.
В этом примере App.js есть три основных компонента: RandomOutfits (массив, отображающий все наряды в разделе Вдохновленные другими нарядами, путем вызова функции .map() для данных в RenderRandom), RandomFavorite (набор нарядов с кнопкой Добавить) и RenderRandom (один наряд в массиве или предоставленных объектах). Имея отдельные компоненты, приложение можно легко организовать и использовать компоненты несколько раз.
Короче говоря, компоненты React позволяют нам вызывать и повторно использовать блоки кода на разных страницах, обеспечивая более удобочитаемость и чистоту кода. Мы также можем сохранить вызываемые данные и повторно использовать их позже. В следующий раз, когда вы откроете приложение, скажем, YouTube, попытайтесь представить себе все компоненты, созданные для создания этого приложения, и представьте себе ужас, если бы все это было закодировано на одной странице. .
