Если вы начали изучать или исследовать React, вы, должно быть, пришли в ситуацию, когда вы передаете свой реквизит до 3 -го – 4 -го или n -го уровня в своей иерархии компонентов.
Опционное бурение по примеру
Промежуточные компоненты не должны ничего делать с этими реквизитами, но действуют как путь, чтобы передать эти реквизиты ребенку, который действительно нуждается в них.
Эта конкретная проблема называется «бурением опоры».
На изображении обложки вы можете видеть, что я на самом деле передаю «Полный Todo» и «Delet Todo» из моего компонента ToDoApp до компонента «todo».
Компонент Todolist не нуждается в том, что с этими реквизитами не нуждается в этом и выступает в качестве посредника здесь.
Несколько проблем с бурением опоры:
- Бесполезные повторные ресурсы будут там, если опора изменится с родителя через событие
- Легко поддерживать код в случае, если есть запрос на изменение и подвержен ошибкам
- Становится очень трудным, когда у нас более глубокий уровень гнездования, и мы передаем реквизит
Как мы можем предотвратить бурение этого опоры?
Мы можем предотвратить это, используя «контекст API» в React. У него есть два названных компонента:
- Контекст Провайдер
- Контекст Потребитель
Кроме того, мы можем даже использовать крюк «UseContext» вместо контекста. Потребитель и предпочтительный способ.
Если мы сможем объединить контекст API с userEducer Hook, это может быть мощным инструментом для собственного управления центральным государством.
Но команда React предлагается, что мы должны использовать только «контекст API», если у нас есть менее частые обновления в этих реквизитах.
Следуй за мной:
LinkedIn: https://www.linkedin.com/in/varunprashar5/
Twitter: https://twitter.com/varunprashar
Оригинал: “https://dev.to/varunprashar5/what-is-prop-drilling-in-react-understanding-context-api-part-1-381l”