Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <a>Контекст в React</a>- это глобальное состояние для компонентов. API React-контекста позволяет создавать глобальные объекты компонентов, которые станут в итоге доступны любому компоненту. Как результат - возможность обмена данными без необходимости передачи свойств по всему дереву DOM.

2 <h2>Применение контекста</h2>

3 В первую очередь, следует создать объект контекста:

4 Если посмотреть React-документацию, то мы увидим, что установка контекста в компоненте выглядит следующим образом:

5 Но, к сожалению, в CodePen (React 16.4.2) это не сработало. Однако можно воспользоваться компонентами высшего порядка (КВП), что позволит задействовать контекст так, как<a>рекомендует</a>Dan Abramov:

6 Тут мы оборачиваем компонент в компонент Context.Consumer, передавая в контекст в виде свойства.

7 Что же, далее можно написать следующее:

8 При этом мы получим доступ к foo из объекта контекста в свойствах.

9 Но как же поменять контекст? Это уже сложнее, но у нас есть возможность ещё раз задействовать компоненты высшего порядка, получив что-то вроде:

10 В первую очередь мы возьмем исходное состояние контекста - это объект, который передан в React.createContext(). Его можно задействовать в качестве состояния компонента-обёртки. Далее определим все методы, которые пригодятся для смены состояния. В конце концов, обернем компонент в компонент Context.Provider. То есть мы осуществляем передачу состояния и функции в свойство value. Следовательно, они появятся в контексте у всех наследников, которые обернуты в компонент Context.Consumer.

11 Далее соберем всё воедино (компоненты высшего порядка для краткости опустим):

12 В результате дочерний компонент получает доступ к глобальному контексту, и у него есть возможность менять значение атрибута foo на baz.

13 Весь код по теме контекста смотрите<a>здесь</a>.

14 <a>Первоисточник</a>