В чем разница между Context и props в React

Question

В чем разница между Context и props в React

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Context и props в React служат для передачи данных, но делают это по-разному.

Props:

Передаются явно от родителя к ребенку через атрибуты
Работают только вниз по дереву компонентов
Лучше для локальной передачи данных

<ChildComponent data={someData} />

Context:

Позволяет передавать данные через дерево без явной передачи props
Доступен всем потомкам Provider'а независимо от глубины
Лучше для глобальных данных (тема, авторизация)

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Основное отличие: props требуют явной передачи через каждый уровень, а Context позволяет "пропускать" промежуточные компоненты. Context следует использовать умеренно, так как он усложняет переиспользование компонентов.

Ответ 18+ 🔞

О, смотри-ка, какая интересная хуйня вылезла! Сидишь ты такой, пишешь на Реакте, и тут бац — нужно данные передать. И вариантов-то, блядь, целых два! Прямо как в том анекдоте про "или грудь, или жопа". Так вот, слушай сюда, разберём эту пиздопроебищну.

Props — это как ручка-передачка, только для данных

Представь: ты — родительский компонент, у тебя есть какая-то хуйня (данные). И ты хочешь её отдать своему дочернему компоненту. Что делаешь? Правильно, суёшь ему прямо в руки, через атрибуты. Всё явно, всё на виду. Как будто кричишь: "На, сынок, держи бутерброд!"

<ChildComponent data={someData} />

И работает это строго сверху вниз, по дереву. Хочешь передать что-то внуку? Придётся, блядь, тащить через сына, который самому нахуй не нужно, но он как курьер — просто передаст дальше. Для локальных, семейных дел — самое то.

Context — это как громкоговоритель на районе

А вот это уже, ёпта, поинтереснее. Ты создаёшь такую общую хуеву тучу данных (контекст) и накрываешь ею целую кучу компонентов. И всем, кто под этой тучой сидит, данные доступны. Без всяких там ручек-передачек через десять поколений!

const ThemeContext = createContext('light'); // Создали тему, светлая по умолчанию

function App() {
  return (
    <ThemeContext.Provider value="dark"> // Накрыли всех тёмной тучой
      <Toolbar /> // А внутри Toolbar могут быть ещё 500 компонентов
    </ThemeContext.Provider>
  );
}

И теперь любой компонент внутри Toolbar, даже если он правнук правнука, может крикнуть: "Эй, дайте сюда тему!" и получить её. Идеально для всякой глобальной хуйни вроде темы оформления, данных авторизации или, не знаю, состояния твоего кошелька.

Так в чём, блядь, разница-то?

Да всё просто, как три копейки:

Props — это когда ты каждому лично в карман кладёшь. Утомительно, зато контролируемо.
Context — это когда ты выходишь на балкон и орешь на весь район. Удобно, но соседи могут не понять.

Главная мысль, которую ты должен вынести, пока не обоссался: Context — это не замена props. Это, блядь, тяжёлая артиллерия. Если будешь юзать его везде, где попало, твои компоненты превратятся в непонимающих, от кого что пришло, уёбков, которых невозможно переиспользовать. Так что думай головой, а не жопой. Для семейных разборок — props. Чтобы на весь район орать — Context. Всё, вопрос закрыт, иди работай.