Почему модель React успешна
На протяжении всей истории React было много способов описать то, что он делает, что делает его модель программирования успешной, и, несомненно, у нее есть несколько аспектов, но давайте посмотрим на ее основу - компоненты.
Одной из наиболее важных характеристик для создания большого программного обеспечения является его ремонтопригодность, а наиболее масштабируемая ментальная основа для обеспечения ремонтопригодности - это возможность удалять и заменять части системы. Так что же отличает React от удаления кода?
Реквизит
Props - это основной способ получения информации компонентом React. Это его стандартный интерфейс ввода. Свойства компонента React во многом аналогичны аргументам функции, но с небольшим, но важным отличием - компоненты автоматически «подписываются» на последнюю версию свойств и автоматически выполняются React.
Еще одна интересная деталь о реквизитах заключается в том, что они могут содержать данные любого типа, которые можно использовать в качестве обратного канала для связи. Например, вызывая функцию дочернего компонента, полученную через реквизиты, он может взаимодействовать с родительским компонентом.
Дети
Дети - это механизм, который дает компонентам React 2 способности: композицию и вложение. Я имею в виду особый вид композиции - возможность визуализировать компонент A внутри компонента B, при этом компонент B ничего не знает о компоненте A. Этого также можно достичь с помощью props, на самом деле, «дети» - это особый ключ в props, но это деталь реализации. Важно то, что он позволяет размещать:
<ComponentA><ComponentB /></ComponentA>
Элементы
Элементы React, вообще говоря, представляют собой платформо-независимое описание отображаемых узлов. Это спецификация, согласно которой компонент возвращается в React и описывает компоненты, которые React необходимо инициализировать, и какие реквизиты и дочерние элементы они получат.
Тот факт, что мы обычно используем JSX для описания элементов или даже то, что JSX передается в вызов React.createElement() функции, является просто еще одна деталь реализации.
React создал систему, которая позволяет компоненту получать данные, выражать то, что нужно отрендерить взамен, и позволяет компоноваться. Это основа и основная причина масштабирования подхода React к созданию пользовательских интерфейсов - каждый компонент реализует один и тот же интерфейс и может быть заменен. Кроме того, тот факт, что приложение React представляет собой дерево, заменяя один компонент, вы можете заменить целое поддерево, которое оно отображает, что дает вам возможность заменять большие строительные блоки сразу.
Речь идет не о VirtualDOM, JSX, хуках, состоянии, контексте, производительности или чистых функциях. Несмотря на то, что все они важны, это всего лишь детали реализации.
