Зачем использовать Context-API?

• Чтобы понять, зачем использовать Context-API, сначала мы рассмотрим, что такое Props-Drilling .

• Посмотрите на левое изображение дерева компонентов.
• Может случиться так, что дочернему компоненту в нижней части дерева потребуются данные, но компоненты контейнера или дочерние компоненты в середине могут не нуждаться в этих данных.
• В этом случае, даже если среднему компоненту не нужны данные, они должны получить их, чтобы передать их дочернему компоненту.
• Если ваше приложение слишком велико, это вызовет большую проблему. Разработчикам необходимо продолжать передавать данные от одного компонента к следующему.
• Эта проблема известна как Props Drilling.

• В Context-API за пределами дерева компонентов создается отдельное пространство для хранения, в котором мы должны хранить данные.
• Теперь, если нам нужны эти данные внутри любого компонента, мы можем напрямую получить доступ к данным из Context-API.
• Теперь посмотрим, как это работает, на примере.

• Для CreateContext мы можем использовать createContext () из React.
• После создания UserContext мы должны его экспортировать.
• Теперь, чтобы добавить данные внутри контекста, мы должны заключить родительский элемент в <UserContext.Provider> или <UserProvider>.
• как только мы обернемся с помощью Wrapper, мы должны передать данные в атрибут value .

1) В функциональном компоненте.

2) В методах жизненного цикла компонента класса.

3) В методе рендеринга компонента класса.

1) В функциональном компоненте: -

• Внутри функционального компонента или хуков мы должны использовать хук useContext (), предоставленный пакетом React.
• Теперь нам нужно импортировать UserContext и передать его useContext () .
• useContext (UserContext) вернет данные пользователя внутри Context. которые мы можем использовать в дальнейшем.

• Самый распространенный способ доступа к Context из компонента класса - через static contextType.
• Если вам нужно значение из Context вне renderметода жизненного цикла или в методе жизненного цикла, вы можете использовать его таким образом.

• Традиционный способ получения значений контекста заключался в заключении дочернего компонента в Consumer.
• Оттуда вы сможете получить доступ к опоре значения как props.
• Вы все еще можете это увидеть, но это скорее устаревший способ доступа к Context.