В React, компоненты и пропсы играют ключевую роль. Компоненты — это строительные блоки приложения, а пропсы позволяют передавать данные между ними. Давайте погрузимся в эту тему и начнем с основ.

Теория

Что такое компоненты

Компоненты — это ключевой строительный блок React-приложений. Они представляют собой небольшие, независимые части интерфейса, которые можно переиспользовать. В React, компоненты могут быть классами (классовые компоненты) или функциями (функциональные компоненты). Компоненты являются фундаментальными для организации кода и делают код более понятным и поддерживаемым.

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

Функциональные компоненты — это функции JavaScript, которые возвращают JSX (расширение JavaScript, позволяющее описывать структуру пользовательского интерфейса). Вот общий вид объявления функционального компонента:

import React from "react";

function MyComponent(props) {
  // Логика компонента
  return (
    // JSX для отображения
  );
}

export default MyComponent;

Здесь MyComponent — это имя вашего компонента, props — это объект пропсов (рассмотрим далее), который может содержать данные, переданные в компонент извне. Внутри компонента, вы можете выполнять любую логику, необходимую для отображения.

Чтобы использовать функциональный компонент, просто добавьте его в JSX вашего приложения, как обычный HTML-тег:

<MyComponent prop1="Значение 1" prop2="Значение 2" />

Внутреннее состояние компонента

В React, внутреннее состояние компонента представляет собой данные, которые компонент может хранить и изменять в процессе выполнения. Для создания и управления внутренним состоянием функциональных компонентов используется хук useState.

Пример Счетчика:

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

import React, { useState } from "react";

function Counter() {
  // Используем useState для создания состояния "count" со значением по умолчанию 0
  const [count, setCount] = useState(0);

  // Функция для увеличения значения счетчика
  const increment = () => {
    setCount(count + 1); // Обновляем состояние "count"
  };

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={increment}>Увеличить</button>
    </div>
  );
}

export default Counter;

Здесь мы:

1. Импортировали хук useState из библиотеки React.
2. Использовали useState для создания переменной count и функции setCount. count — это наше внутреннее состояние счетчика, а setCount — функция для его обновления.
3. Создали функцию increment, которая увеличивает значение счетчика при каждом нажатии на кнопку «Увеличить», используя setCount.
4. Теперь мы имеем компонент Counter, который имеет внутреннее состояние в виде счетчика. При каждом нажатии на кнопку «Увеличить», значение счетчика обновляется и отображается на экране.

Что такое props

Props (сокращение от «properties») — это способ передачи данных от родительских компонентов дочерним. Они представляют собой атрибуты компонентов и могут содержать как данные, так и функции. Props позволяют динамически изменять содержимое компонентов, делая их более гибкими и многоразовыми.

Пример передачи данных через props

Предположим, у нас есть компонент TaskList, который отображает список задач, и компонент Task, который представляет отдельную задачу. Мы можем передать данные о задачах из TaskList в Task с помощью props:

// В компоненте TaskList
<Task title="Купить продукты" />

// В компоненте Task
function Task(props) {
  return <div>{props.title}</div>;
}

В этом примере title передается из TaskList в Task через пропс, и компонент Task отображает заголовок задачи.

Вложение компонентов с помощью props.children

props.children в React — это специальное свойство, которое позволяет передавать дочерние элементы в компоненты и манипулировать ими. Это делает компоненты более гибкими и позволяет вам вставлять контент между открывающим и закрывающим тегами компонента.

Предположим, у нас есть компонент TodoList, который будет отображать список задач внутри себя. Мы хотим, чтобы мы могли передавать сами задачи внутрь этого компонента. Вот как это можно сделать:

function TodoList(props) {
  return (
    <div>
      <h2>Список задач</h2>
      <ul>
        {props.children}
      </ul>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Приложение Todo</h1>
      <TodoList>
        <li>Купить молоко</li>
        <li>Подготовить презентацию</li>
        <li>Позвонить маме</li>
      </TodoList>
    </div>
  );
}

В этом примере, мы создаем TodoList, который принимает props.children. Когда мы используем TodoList внутри App и передаем ему список задач в виде дочерних элементов (элементов <li>), они автоматически становятся props.children для компонента TodoList.

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

Практика

В практике мы создадим несколько простых компонентов и передадим данные между ними с использованием props.

Пример создания компонентов:

// Компонент Header
function Header(props) {
  return <h1>{props.title}</h1>;
}

// Компонент List
function List(props) {
  const items = props.items.map((item, index) => (
    return <li key={index}>{item}</li>
  ));
  return <ul>{items}</ul>;
}

Здесь мы создали компонент Header, который отображает заголовок, и компонент List, который отображает список элементов.

Пример передачи данных через props:

// В родительском компоненте
const items = ["Пункт 1", "Пункт 2", "Пункт 3"];

function App() {
  return (
    <div>
      <Header title="Список Пунктов" />
      <List items={items} />
    </div>
  );
}

Здесь мы передаем заголовок и список элементов из родительского компонента App в дочерние компоненты Header и List с помощью props. Каждый компонент может использовать эти данные для отображения на странице.