Как работает react context?

Question

[Максим Ахмеров]

в оф доке реакта про контекст в примерах все показано через state, что если мы хотим что-то поменять в контексте, то нам надо через конекст прокидывать callback на изменение state и только потом поменяется context, получается что без корневого state мы в контексте не сможем поменять данные????
и вопрос в догонку про редакс, как мы знаем, редакс работает на контекстах, получается там скорее всего такая же логика, что при изменении стора, у нас перерисовывется корневой элент и за ним все остальные, но там уже нам помогает coonect не перерисовывать лишний раз компоненты, у которых пропсы не поменялись?

Comments

[beDenz]

а вы сами подумайте: зачем менять значение в "конексте" не меняя это же значение в стейте?!

по поводу второго вопроса: у вас все смешалось в голове, контекст и перерисовка никак не связаны друг с другом. читайте что такое реактивное программирование и как реакт строит веб приложение

[Максим Ахмеров]

beDenz, насчет вашего 1го ответа: тогда получается без локального стейта вообще никак не обойтись.
насчет второго ответа: я имел в виду, что когда используем редакс, то там оборачиваем наше приложение в провайдер и скорее всего он выступает вроде локального стейта, который заставляет подменить все значения в контексте и тем самым заставить перерендерится все нижние компоненты, которые вскоре получат новые пропсы

[beDenz]

Максим Ахмеров,
1) смотря для чего, вы же не обрисовали задачу
2) не верно понимаете, контекст позволяет давать доступ к глобальному стору нужному компоненту и все! а то что вы делаете со стором ему все равно.

React сам следит за каждым заданным значением, и если какое либо значение изменилось, то происходить перерасчет всем всех связанных с ней значений, что в свою очередь заставляет пересчитывать и перерисовывать компонент. И так делает не только react, в том же вью тоже самое происходит

[Максим Ахмеров]

beDenz, 2) я имел в виду, что в компоненте провайдера от редакса, есть стейт, в котором все хранится и при каждом диспатче у нас меняется стейт и он как раз и заставляет всех перерендерится и отдает всем новые пропсы.
а опираясь на пример из доки реакта про контекст, получается что в диспатче у нас лежит callback который меняет стейт.
я не уверен, что это правильно, тк вот только сейчас надумал. мб верно, мб нет

Answer 1

[Klein Maximus]

Провайдер контекст транслирует дочерним компонентам какое-то значение.

Это может быть состояние (реактивное и изменяемое), могут быть какие-то функции (например, для изменения состояния), может быть вообще просто нативный объект (например, какая-то конфигурация приложения, которую не нужно менять) или просто константа (ну, вдруг пнадобится). Тут все зависит от того, что требуется передать вниз по дереву компонентов.

Соответственно, если нужно что-то изменяющееся, отслеживаемое и реактивное, то да, надо передавать состояние (state провайдера) и без него никак.

Это очень похоже на Redux. Но не стоит беспокоиться, что на каждый чих провайдер будет перерисовывать все дерево. Просто детей надо передавать в провайдер через children. В таком случае при изменении стейта будут ререндериться только Consumer-ы этого контекста (или те компоненты, которые используют useContext).

Comments

[Максим Ахмеров]

а можешь сказать почему будет рендерится только consumers?
насколько я себе представляю, у корневого компонента поменяется стейт, значит он запустит метод рендер и все его дети удалятся и будут рендерится заного

[Klein Maximus]

Максим Ахмеров, провайдер контекста будет перерендериваться, когда изменятся дети. Если дети будут постоянной React-нодой, то перерисовки не будет. Конечно, надо за этим следить.
https://frontarm.com/james-k-nelson/react-context-...

По сути, всё что нужно сделать, так это создавать состояние контекста в отдельном компоненте. Т. е. для провайдера нужен свой компонент. Тогда дочерние элементы будут переданы в этот компонент сверху, и это будет стабильная и постоянная Реакт-нода.

[Максим Ахмеров]

Klein Maximus, слушай, можешь пояснить?
провайдер контекста будет перерендериваться, когда изменятся дети. Если дети будут постоянной React-нодой, то перерисовки не будет. Конечно, надо за этим следить.
вот это не понимаю,в том примере что ты скинул, у нас есть стейт и мы его потом меняем, там то ясен пень, что все перерендерится, тк корневой элемент перерендерится,
а вот когда дети меняются, то мы никак же не можем верхнеуровневые компоненты заставить перерендерится, поэтому я не понимаю, как изменение детей может заставить перерендерится провайдер.

[Klein Maximus]

Максим Ахмеров, не так :) Имеется в виду, что внутреннее дерево провайдер должно передаваться через children. Сравните код параграфах Preventing unnecessary renders и Oops, I re-rendered the entire app, и все станет понятно.

[Klein Maximus]

Максим Ахмеров, просто если внутреннее дерево создается где-то снаружи и передается внутрь компонента через props.children, то при изменении такого компонента, переданное дерево детей не перерисовывается, потому что оно создано в другом месте.
Более подробно тут.

[Максим Ахмеров]

Klein Maximus, офигеть, спасибо), блин, вроде 1,5 года пишу на реакте, а о таких штуках даже не задумывался