Прогресс0%
React позволяет хранить состояние в компоненте и передавать его пропсами вниз по дереву. Но когда данные нужны на нескольких уровнях, пропсы приходится пробрасывать через компоненты, которым они не нужны — это и есть «проброс пропсов» (prop drilling).
То же самое с колбэками: чтобы дочерний компонент мог обновить состояние, функцию приходится передавать через промежуточные слои. И когда в приложении несколько независимых «источников» данных (тема, пользователь, локаль), структура пропсов быстро усложняется.
React Context даёт возможность «предоставить» значение выше в дереве и «подписаться» на него в любом дочернем компоненте — без передачи через каждый уровень. При этом важно понимать: когда потребитель оказывается вне провайдера, как разделять контексты и как не вызывать лишние перерисовки в больших списках.
В этом курсе вы по шагам разберёте Context на 10 заданиях: от первого провайдера и потребителя до сценариев с несколькими контекстами и оптимизацией списков.
Context — это механизм React для передачи данных через дерево компонентов без явной передачи пропсов на каждом уровне. Вы создаёте контекст (createContext), «предоставляете» значение через Provider и «читаете» его в дочерних компонентах через Consumer или хук useContext. Контекст удобен для темы, текущего пользователя, локали и другого «глобального» для части дерева состояния. Важно: значение провайдера сравнивается по ссылке, поэтому нестабильный объект в value приводит к перерисовкам всех потребителей — в курсе разбираем, как этого избежать.
Курс состоит из заданий: в каждом есть постановка задачи и редактор кода, где можно решать задачу в браузере.
*.проблема.jsx) даётся код, в котором нужно что-то дописать или изменить.*.решение.jsx — его можно открыть после того, как попробуете сделать сами, или если застряли.Рекомендуется сначала попробовать решить задание самостоятельно, при необходимости подсмотреть подсказки в коде или в документации React, и только потом смотреть решение.
Понадобятся базовые знания React: компоненты, JSX, useState. Понимание хуков приветствуется; useContext разбирается в курсе.
Нужны Node.js и npm (или yarn). Репозиторий можно клонировать и запускать задания у себя:
npm run task:NN — запуск задания (проблема), например npm run task:05.npm run solution-NN — запуск готового решения, например npm run solution-05.