React — это библиотека JavaScript, которая помогает быстро и легко создавать проекты, которые обычно занимают много времени в ванильном JavaScript. Ванильный JavaScript — это императивное программирование, а React — более декларативное программирование. Вместо этого я мог бы объяснить императив и декларативность в более технических терминах, я буду использовать свое время в Subway в качестве художника по сэндвичам, чтобы объяснить. Императивное программирование похоже на то, как клиент приходит и просит свой бутерброд с очень конкретными деталями, такими как удаление внутренней части хлеба, поджаривание хлеба в течение определенного времени и другие более конкретные запросы. Декларативное программирование, с другой стороны, представляет собой выбор клиентом пункта меню без конкретных инструкций для уже заданного бутерброда.
function h1Tittle() {
const div = document.querySelector('#my-id');
const h1 = document.createElement('h1');
h1.classList.add('my-class');
h1.textContent = "Hello World";
div.appendChild(h1);
}
В приведенном выше примере показано, как vanilla JS создает элемент, а затем добавляет этот элемент в другой элемент.
function Title() {
return (
<div>
<h1 className= 'my-class'>Hello, World</h1>
</div>
)
}
Это функциональный компонент в React, который делает то же самое, что и предыдущий пример, но более лаконично.
Компоненты имеют универсальное применение, которое может облегчить расшифровку и отладку вашего кода в долгосрочной перспективе. Передача информации от одного родителя к дочернему может быть выполнена с помощью реквизита в компоненте.
const App = () => {
return (
<div>
<Header />
</div>
)}
Этот код выше является родительским элементом для дочернего элемента. Это захват информации из заголовка и добавление ее в компонент приложения. Передаваемая информация является очень простой из заголовка и не может быть изменена, если только она не будет автоматически включена в компонент заголовка и не будет изменен текст внутри.
const Header = () => {
return (
<h1>Hello</h1>
)}
Родительский компонент (приложение) может передавать информацию дочернему компоненту (заголовку), передавая реквизит. Реквизиты передаются как объект, к которому дочерний элемент может получить доступ в качестве аргумента. Свойство может передавать любую информацию дочернему элементу для использования, такую как строки, объекты, логические значения и числа.
const App = () => {
return (
<div>
<Header greeting={"hello"}/>
</div>
)}
const Header = (prop) => {
return (
<h1>{prop.greeting}</h1>
)}
В приведенном выше примере компонент приложения задает приветствие как объект и передает его в качестве аргумента в заголовке. Теперь заголовок может захватывать переданную информацию, устанавливая ее как <h1> текстовое содержимое. Это базовое использование реквизита, но оно показывает большой потенциал для передачи более сложных объектов.
Деструктуризация — еще один синтаксический инструмент, который можно использовать вместе с реквизитами. Деструктуризация — это процесс извлечения значения из массива или свойства объекта и установки их в собственную переменную.
const array = [5,1,2]
const [num1, num2, num3] = array
console.log(num1) // 5
console.log(num2) // 1
console.log(num3) // 2
console.log(num1,num2,num3) // 5 1 2
const obj = {
name: "Alex",
city: "Elizabeth"
}
const {name, city} = obj
console.log(name) // Alex
console.log(city) // Elizabeth
Приведенный выше пример является кратким примером того, как выполняется деструктуризация массива и объекта. В случае массива каждый элемент внутри массива сохраняется в переменной и теперь может использоваться без необходимости захватывать каждый элемент один за другим по индексу. С другой стороны, для объектов вместо того, чтобы давать ключам их собственное уникальное значение, на них должен ссылаться ключ, который вы пытаетесь специально захватить. Это лишь краткое объяснение того, как работает деструктуризация, для более подробного ознакомления. Web Dev Simplified на YouTube дает лучшее представление о деструктуризации.
const App = () => {
return (
<div>
<Header greeting={"hello"}/>
</div>
)}
const Header = ({greeting}) => {
return (
<h1>{greeting}</h1>
)}
Приведенный ранее пример можно разобрать, поскольку информация, передаваемая в заголовок, является объектом. Свойство можно было бы деконструировать внутри функции Header, но более упрощенный и чистый вид будет напрямую деконструировать объект как аргумент. Это небольшой пример того, как полезное свойство props и деструктурирование можно использовать вместе, когда есть большие объекты или массивы.
