Вам когда-нибудь было любопытно, почему член семьи может иметь отличные черты от вас и других членов семьи? Ваша первая первоначальная мысль - проследить до их родителей и выяснить общего предка, у которого могла быть эта особенность. Подсознательно вы разбиваете генеалогическое древо и подключаетесь, чтобы увидеть, что могло быть передано конкретным членам семьи, унаследовавшим его. Поступая так, вы соединяете точки; это очень похоже на выяснение иерархии компонентов в React.
Важно понимать иерархию, поскольку это основная структура того, как будет отображаться приложение. Ключевые выводы иерархии компонентов заключаются в том, что она подчеркивает взаимосвязь между компонентами, структурой и гибкостью в библиотеке компонентов, потоком связи и функциональностью отдельных компонентов. Подумайте о передаче информации, как об игре в Телефон. Мы «шепчем» информацию, которую хотим отправить каждому компоненту на пути. Мы не можем просто перейти к компонентам, поскольку это не приведет к выполнению информационного потока. Таким образом, очень важно визуализировать или создать иерархию.
Одним из препятствий, с которыми я столкнулся при изучении React, было запоминание синтаксиса кода и конкретных инструментов, необходимых для запуска и работы приложения с функциями, предоставляемыми различными пакетами JavaScript. Как бы я ни пытался просмотреть коды React, это было сложно, поскольку я только поглощал структуру кода, а не идею того, почему он написан определенным образом.
Мой прорыв в понимании иерархии компонентов был ключом, который помог мне запомнить, как передавалась информация и какой компонент мог повлиять на другой компонент (информационный поток). Это также помогло мне понять, как создаются приложения, просто разбивая / анализируя каркас.
По сравнению с обычным Javascript, React сильно интегрирует его философию. Без полного понимания этой логической части кодирования в React изучение любых других материалов в React будет нелегким. Как здорово, что вы оказались в нужном месте в нужное время, чтобы понять фундаментальные основы иерархии компонентов! К концу этого вы без колебаний будете создавать иерархии компонентов!
В этой статье вы узнаете -
- Как понять иерархию компонентов
- Как иерархия компонентов влияет на каркас
Этапы изучения иерархии компонентов React:
- Определите самый высокий компонент
Первым шагом к построению иерархии является определение компонента самого высокого уровня, который будет импортировать другие компоненты. В большинстве случаев самый высокий компонент называется App.js.
Каркас: инкапсулирует все приложение и то, что должно быть внутри него.
Иерархия: она находится в самом верху диаграммы и может упоминаться как «дедушка или бабушка».
2. Определите родительские компоненты
Два способа идентифицировать родительские компоненты:
1. Видя, что определенные компоненты импортируются в компонент самого высокого уровня, в данном случае в App.js
2. Имя функции в родительском компоненте возвращается в функции самого высокого компонента.
Каркас: общие функции (например, заголовок) или то, где будет отображаться информация, определяют, где ее можно разместить в приложении.
Иерархия: она ответвляется от App.js и располагается ниже самого высокого компонента. На родительские компоненты можно ссылаться как на «тети или дяди».
3. Определите дочерние компоненты в родительских компонентах, если таковые имеются!
Мы можем использовать тот же процесс для определения местоположения родительского компонента для идентификации дочерних компонентов! За исключением того, что мы должны искать их только в родительских компонентах.
Каркас: так конкретная информация отображается в родительском компоненте. Это может быть текст, изображения, числа и т. Д.…
Иерархия: только некоторые родительские компоненты будут иметь дочерние компоненты. На дочерние компоненты можно ссылаться как на «внуки / внуки».
Поскольку описанная выше иерархия компонентов завершена, завершенный каркас будет выглядеть следующим образом.
Я настоятельно рекомендую практиковать и понимать этот логический процесс, пока он не станет вашей второй натурой. После того, как вы определились с этим пошаговым и логическим процессом вручную, еще один простой способ выяснить иерархию - загрузить расширение компонентов. Он появится в инструментах разработчика и автоматически предоставит иерархию компонентов. Ознакомьтесь с пошаговым руководством по загрузке расширения chrome от Джо Моргана под названием Как отлаживать компоненты React с помощью инструментов разработчика React или нажмите здесь!
Спасибо за чтение и удачи в построении иерархии компонентов! 😎
