В этой статье мы поговорим о том, что делает управление данными в React таким сложным, и как вы можете начать упростить свои приложения React с помощью шаблона Tiny Context.
бурение опор
Если вы используете React в течение приличного количества времени, вы можете быть знакомы с проблемой prop-drilling.
Компоненты React связаны в древовидную структуру и передают данные своим дочерним элементам через свойства. Prop-drilling происходит, когда компонент, которому нужны некоторые данные, находится слишком далеко от компонента, который изначально извлекает эти данные.
Как видите, myData добавил много шума компонентам нашего примера. Вы можете себе представить, как эта проблема будет становиться все хуже и хуже по мере роста нашего примера. Если мы добавим больше слоев между MyComponent и GreatGrandparentComponent или родственных слоев для MyComponent, которым нужны другие конкретные данные, бурение пропеллеров продолжится.
Вскоре наши ParentComponents и GrandparentComponents будут полны данных, которые они никогда не используют, просто потому, что это требуется их детям.
Контекст может помочь
Context — это встроенное в React решение для пропеллерного бурения. Это позволяет вам provide размещать некоторые данные в определенном месте дерева компонентов. Любой компонент, расположенный дальше по дереву, может подписаться на consume эти данные.
Даже в самых простых сценариях Context значительно улучшает чистоту кода нашего компонента. Когда мы удаляем проп-бурение, мы удаляем отвлекающие факторы в нашем коде; мы можем следовать принципам единой ответственности и инкапсуляции. Внезапно наш компонент не беспокоится о потоке данных от его родителя или к его дочерним элементам. Он может просто сосредоточиться на чем-то одном, что ему нужно сделать хорошо.
Обратите внимание, как наши GrandparentComponent и ParentComponent могут полностью игнорировать myData, как только мы добавим в Context:
Итак, мы видим, как Context может помочь нам писать более качественные компоненты. Теперь вопрос: что делает хороший контекст?
Крошечные контексты
Наивные разработчики могут поместить все свои данные в один контекст в верхней части дерева. Это удобно и просто, но чем больше мы добавляем данных, тем сложнее их понять, и производительность снижается.
Более опытные разработчики могут заметить это и обратиться к стороннему решению с более жесткой структурой, например Redux. Стоит ли добавлять в нашу кодовую базу совершенно новую систему с совершенно новыми соглашениями только потому, что наш мегаконтекст становится слишком сложным?
Я так не думаю. Мы можем следовать тем же принципам единой ответственности и инкапсуляции, которые мы использовали в наших компонентах, и разбить наш мегаконтекст на набор Tiny Contexts.
Просто логически отделив значения от нашего мегаконтекста, назначение нашего кода становится более очевидным! Более того, это разделение сделает наши контексты более производительными и их будет легче расширять в будущем.
Чтобы было ясно, с Tiny Contexts нет особого трюка. Это не новая библиотека или какая-то скрытая функция React. Это просто сознательный выбор, чтобы каждый контекст был маленьким и конкретным.
Резюме
В этой статье мы обсудили трудности управления состоянием и потоком данных в React. Мы увидели, как вы можете писать более качественные компоненты, используя встроенный Context React, и как вы можете создавать более качественные приложения, распределяя свои данные по логически разделенным Tiny Contexts.
В следующий раз, когда вы будете бороться со сложным кодом в React, попробуйте этот шаблон! Это может быть именно то, что вам нужно, чтобы вернуть ваши данные под контроль.
