Как передаются данные в компоненты React?

Основной способ: Props

В React данные передаются в компоненты через props (properties). Это аргументы функции компонента, которые позволяют родительскому компоненту передавать данные дочернему.

// Родительский компонент
function App() {
  const userName = "Иван";
  const userAge = 28;

  return (
    <UserCard name={userName} age={userAge} />
  );
}

// Дочерний компонент
function UserCard({ name, age }) {
  return (
    <div>
      <p>Имя: {name}</p>
      <p>Возраст: {age}</p>
    </div>
  );
}

Альтернативные способы передачи данных

1. React Context API

Когда нужно передать данные глубоко вложенным компонентам, избегая "prop drilling" (передача пропсов через множество уровней):

// Создаём контекст
const UserContext = React.createContext();

// Провайдер (предоставляет данные)
function App() {
  const user = { name: "Иван", role: "Admin" };

  return (
    <UserContext.Provider value={user}>
      <Header />
      <MainContent />
      <Footer />
    </UserContext.Provider>
  );
}

// Потребитель (получает данные из контекста)
function Header() {
  const user = React.useContext(UserContext);
  return <h1>Добро пожаловать, {user.name}!</h1>;
}

2. State Management (Redux, Zustand, Recoil)

Для сложных приложений используют глобальное состояние:

// Redux пример (упрощённо)
import { useSelector, useDispatch } from react-redux;

function UserProfile() {
  const user = useSelector(state => state.user);  // получаем данные
  const dispatch = useDispatch();

  const handleUpdate = (newData) => {
    dispatch(updateUser(newData));  // обновляем данные
  };

  return (
    <div>
      <p>{user.name}</p>
      <button onClick={() => handleUpdate({ name: Петр })}>
        Изменить имя
      </button>
    </div>
  );
}

3. URL параметры (для маршрутизации)

Данные передаются через URL:

import { useParams } from react-router-dom;

function UserPage() {
  const { userId } = useParams();  // получаем параметр из URL
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    // Загружаем пользователя по ID
    fetchUser(userId).then(setUser);
  }, [userId]);

  return user ? <UserCard user={user} /> : <Loading />;
}

// Использование: /users/123

4. Local Storage / Session Storage

Для сохранения данных в браузере:

function UserPreferences() {
  const [theme, setTheme] = React.useState(() => {
    // Загружаем тему из localStorage
    return localStorage.getItem(theme) || light;
  });

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
    localStorage.setItem(theme, newTheme);  // сохраняем
  };

  return (
    <button onClick={() => handleThemeChange(dark)}>
      Переключить тему
    </button>
  );
}

Когда использовать что

Лучшие практики

1. Начинай с Props — это самый простой и понятный способ
2. Избегай глубокого prop drilling — если пропсы проходят через 3+ уровня, используй Context
3. Типизируй Props — используй TypeScript или PropTypes
4. Не мутируй Props — это может привести к багам
5. Передавай только нужные данные — не передавай весь объект, если нужно одно поле