Если вы стремитесь создавать аккуратный и эффективный код React, важно понимать детализацию реквизитов и контексты React.
Это две концепции, которые играют ключевую роль в том, чтобы ваш код оставался организованным и ваше приложение работало хорошо.
В этой короткой статье вы узнаете все, что вам нужно знать о React Context и детализации реквизитов, а также о том, как избежать детализации реквизитов.
Итак, без лишних слов, давайте начнем…
Что такое Prop Drilling в ReactJs и как этого избежать?
Проще говоря, тренировка реквизита похожа на ситуацию, когда вам нужно передать кому-то записку, но в конечном итоге вы передаете ее через группу других людей, которым на самом деле не нужно ее видеть, прежде чем она наконец попадет к нужному человеку.
В React детализация свойств относится к ситуации, когда вы передаете реквизиты (состояние) от компонента верхнего уровня до глубоко вложенного компонента, даже если некоторые из промежуточных компонентов фактически сами не используют эти реквизиты.
На рисунке выше мы передали состояние userInfo из компонента приложения через заголовок, а затем в «Пользователь», «Вход» и «Меню». Пока Header его не использует.
Вот почему контекст React хорош — он позволяет нам часто не использовать реквизиты, поэтому мы не застреваем в проблемах с сверлением реквизитов.
Что такое контекст React?
Контекст React позволяет нам легче обмениваться или использовать данные (состояние) между несколькими компонентами без использования реквизитов.
Когда нам следует использовать React Context?
Контекст React отлично работает, когда мы передаем данные, необходимые нескольким компонентам нашего приложения. Например, данные аутентификации пользователя и т. д. Данные должны быть помещены в контекст React, который не требует частых изменений.
Потому что он создан не для того, чтобы заменить всю систему управления состоянием, а для того, чтобы упростить потребление данных.
Представьте себе контекст React как способ использования глобальных переменных в ваших компонентах React. Это похоже на специальный инструмент, который позволяет вашим компонентам обмениваться информацией без необходимости передавать ее через множество слоев кода.
Контекст React Может быть излишним!
Каждый раз, когда вы быстро прибегаете к использованию контекста React, просто чтобы избежать необходимости сверления реквизитов, это может быть немного чрезмерным.
Вместо этого рассмотрите возможность более эффективного расположения ваших компонентов, чтобы избежать необходимости передавать обширные реквизиты.
Заменяет ли контекст React библиотеки управления состоянием, такие как REDUX?
Когда вы только начинаете работать с React, Redux может показаться удобным инструментом для беспрепятственного обмена данными.
Это связано с тем, что Redux как бы встроен в контекстную систему React.
Однако вот в чем дело: если ваша основная цель не связана с изменением состояния, а вы только передаете данные через свои компоненты, то использование большого глобального решения по управлению состоянием, такого как Redux, может оказаться слишком сложным.
📌Для этой статьи этого достаточно. Следуйте дальше.
✖️ Твиттер: https://twitter.com/MTKTheOfficial
📺Youtube: https://www.youtube.com/@codewithmtk
