Основная концепция React, которую вам нужно понять, — это Компоненты. Компоненты React похожи на теги в HTML, это способ инкапсулировать код в один элемент, который имеет свою собственную функциональность, стилизацию и структуру. Они позволяют нам организовать наше приложение, сортируя его на маленькие части, которые при соединении образуют приложение или, в большинстве случаев, его часть.
Компоненты
У нас есть два способа определить компоненты: первый — создать функцию Javascript (рис. 1), а второй — использовать класс ES6 (рис. 2). Оба кода являются действительными компонентами React и вернут текст «Мой первый компонент». Возврат действительного компонента React всегда будет HTML, который вы хотите отобразить в браузере.
Чтобы помочь вам выполнить шаги, описанные в этой статье, я создаю «очищенный» проект с только файлами, которые нам нужны для запуска проекта React.
Вам нужно будет установить git на свой компьютер, после этого просто перейдите в терминал в каталог, в который вы хотите клонировать проект, и введите следующую команду: ```git clone https:/ /github.com/Verdant31/Cleaned-React-Project``.
Если вы хотите лучше узнать, какие файлы я удалил, вы можете проверить эту статью здесь в среде:
Для этого исследования мы собираемся создать список репозиториев, первый компонент будет простым списком HTML с strong в качестве заголовка, p в качестве описания и ссылка на репозиторий. Чтобы создать наш компонент, перейдите в src, создайте папку components и внутри нее создайте файл с именем «RepositoryList.js» (рис. 3).
Когда наш компонент создан, нам нужно сообщить React, что мы хотим его отобразить, для этого просто перейдите к файлу App.js, импортируйте наш компонент, удалите предыдущее содержимое и передайте наш новый компонент. на обратку (рис. 4). Теперь, перейдя в корень нашего приложения, мы можем увидеть список наших репозиториев (рис. 5).
Каждый раз, когда я говорю «рендеринг», это означает отображение в браузере.
На данный момент у нас есть только один репозиторий, но если у нас их намного больше? Думая об этом, мы можем создать новый компонент с именем RepositoryItem(Рис. 5) и реплицировать его в нашем списке репозиториев (Рис. 6).
Наш компонент «RepositoryItem» имеет статический контент, но если я хочу передавать разную информацию для каждого репозитория? Мне нужно будет создать один компонент для каждого репозитория? Это было бы много работы, чтобы справиться с этим, мы можем использовать реквизиты.
Реквизит
Компоненты могут получать один объект в определении параметров, этот объект называется «реквизитом». Вы можете видеть их как атрибуты, которые получают HTML-теги. Это переменные или информация, которую мы можем передать компоненту, чтобы изменить его поведение.
Во-первых, давайте создадим массив из двух репозиториев, а затем передадим его в наш RepositoryItem (рис. 7).
// Creating a variable to store our repositories
const repositories =
[{
name: 'The React Universe',
description: 'A study of React',
url: 'https://github.com/Verdant31/Cleaned-React-Project'
},
{
name: 'Unform',
description: 'Forms in React',
url: '/'
}]
Чтобы очистить его, мы создаем массив с двумя репозиториями, один из которых представляет собой объект с именем , описанием и URL-адресом. С нашим созданным массивом мы передали первый репозиторий в наш первый RepositoryItem, а второй репозиторий — в наш второй RepositoryItem.
Теперь нам нужно получить этот реквизит в нашем RepositoryItem, чтобы сделать это, как мы получаем информацию в компоненте в виде одной переменной, объект репозитория будет внутриprops нашего компонента.
Мы можем подтвердить это, указав console.log(props) внутри нашего компонента (рис. 8), результатом будет информация о нашем репозитории в консоли браузера (рис. 9).
Мы видим, что два визуализированных компонента отображали информацию о собственном репозитории, один выводил информацию о первом репозитории, а другой — второй.
Чтобы наш компонент начал отображать репозитории, мы можем передать переменные, которые находятся внутри наших репозиториев, в соответствующий элемент HTML (рис. 10).
Не забывайте, что на рис. 7 мы передаем наш репозиторий как объект с именем repository, поэтому для доступа к имени, описанию и URL-адресу нам нужно получить доступ к переменной props и внутри него у нас будет наш объект репозитория. (Итак, props.repository.repositoryProp).
После этого мы уже можем видеть результаты на дисплее компонентов (рис. 11).
И именно так мы используем реквизиты в React, теперь мы можем сойти за последнюю вещь, которую вам нужно знать, чтобы использовать React, состояние.
Состояние
Чтобы лучше понять состояния в React, давайте создадим компонент только для объяснения этой концепции, после того как мы применим его в нашем списке репозиториев. Наш компонент будет счетчиком (рис. 12), у него будет кнопка для увеличения счетчика и тег h1, отображающий его значение.
Создав счетчик, мы можем отобразить его, просто добавив в наш файл App.js (рис. 13). React не позволяет нам передавать два или более компонента подряд без родительского компонента, поэтому мы будем использовать фрагмент (фрагмент — это просто тег HTML без имени, который позволяет вам обернуть или сгруппировать несколько элементов без добавления дополнительного узла в DOM), чтобы справиться с этим.
Давайте превратим наш счетчик в функциональный счетчик (на данный момент он ничего не делает). Для этого в нашем компоненте мы создадим переменную counter, в которой будет храниться значение нашего счетчика, и функцию increment для увеличения его значения (рис. 14).
Глядя на наш код, у него есть все, чтобы работать нормально, у нас есть h1 для отображения значения счетчика и кнопка, которая при ее срабатывании вызывает функцию для увеличения значения счетчика.
Но, к нашему удивлению, когда мы нажимаем кнопку, значение счетчика не меняется (или, по крайней мере, так кажется). Давайте разбираться, что идет не так.
Давайте добавим console.log() внутрь нашей функции, чтобы показать, что происходит со значением счетчика (рис. 15).
Теперь, если мы откроем инструменты разработчика в браузере и нажмем кнопку, чтобы увеличить счетчик, мы увидим, что на самом деле значение меняется в соответствии с вызовом функции (рис. 16), но почему значение в браузере также не увеличивается?
По умолчанию React не прослушивает изменения в переменных для повторного рендеринга компонента, и это понятно. В приложении с большим количеством информации для отображения на экране эта «функция» сделает приложение очень медленным и вызовет проблемы с производительностью. Чтобы справиться с этим, в React появилась концепция состояния.
Состояние — это переменные, которые React будет отслеживать, чтобы знать, когда выполняется повторный рендеринг, а когда нет. Имея это в виду, мы можем сделать вывод, что изменения состояния компонента вызывают повторную визуализацию. Чтобы объявить новую переменную состояния, мы можем использовать хук useState из React.
Этот хук получает начальное значение состояния и возвращает массив с переменной, в которой будет храниться само значение, и метод для изменения значения состояния. По соглашению сообщества мы всегда деструктурируем возврат этого хука и называем метод как set + имя переменной, например:
const [ variableValue, setVariableValue ] = useState(initialValue)
Думайте о setVariableValue как о функции, которая получает новое значение, создает новую переменную, передавая это новое значение этой новой переменной, и ее новая переменная начинает быть новым значением этого состояния.
Не проще ли просто напрямую изменить значение переменной вместо использования этого метода? Да, было бы, но это противоречит принципу неизменности в state React.
Если вы хотите узнать больше об неизменности в React, я рекомендую прочитать эту статью:
Чтобы сделать нашу переменную counter состоянием нашего компонента, мы импортируем useState и используем его для создания переменной. Теперь, вместо прямого изменения значения counter в нашей функции, мы можем использовать для этого setCounter, вызвав его и передав новое значение, которое мы хотим сохранить ( Рис. 17).
При этом, когда мы нажимаем кнопку, мы видим, что теперь значение счетчика меняется, вот почему теперь, когда мы нажимаем кнопку, мы вызываем изменение состояния нашего компонента, заставляя React генерировать новый рендер.
Теперь, возвращаясь к нашим репозиториям, мы можем хранить репозитории в состоянии нашего компонента, просто выполнив это (рис. 18):
Бонус (Создание функции добавления нового репозитория)
Для этого вместо того, чтобы передавать индекс репозитория каждому компоненту, давайте создадим карту в нашем массиве репозиториев внутри возврата HTML нашего компонента.
Чтобы написать код Javascript внутри HTML, просто поместите наш код JS в скобки (рис. 19).
Делая это, мы гарантируем, что RepositoryItem будет отображаться в браузере для каждого репозитория в нашем массиве. (То же самое, что и раньше, но теперь более производительно).
Теперь мы можем создать кнопку, которая также запускает функцию, которая добавляет новый репозиторий в наш список (рис. 20).
Обратите внимание, что когда мы нажимаем кнопку, мы видим, что новый репозиторий добавляется в браузере, поэтому наши репозитории являются частью состояния нашего компонента, когда мы вызываем изменение (например, добавляем новый репозиторий, выполняя setRepositories([…repositories, newRepository])), мы генерируем повторную визуализацию нашего компонента с новым списком репозиториев.
Если вы хотите увидеть окончательный проект, я поставлю ссылку ниже, если код, который мы создали в этой статье.
Я надеюсь, что эта статья хоть как-то помогла вам в изучении вселенной React, любые предложения приветствуются, спасибо за внимание и никогда не забывайте, не переставайте учиться.
