React стал самым востребованным фреймворком по ряду причин. Он быстрый, легкий и хорошо «реактивный». Я помню, как услышал, что Instagram полностью построен на React, и подумал: «Ну, я люблю Instagram, значит, React должен быть хорош».
Важно помнить, что все в React является компонентом. Весь пользовательский интерфейс состоит из компонентов и компонентов внутри компонентов. Есть даже функциональные компоненты, которые никогда не достают до экрана и находятся слишком глубоко под поверхностью. Они просто помогают создавать и формировать компоненты, которые достигают экрана. Все является компонентом, и это большая часть React.
Компонентно-ориентированное программирование — это то, как думать о создании вещей в React. В каком-то смысле лучше всего то, что язык буквально создан для того, чтобы заставить вас следовать этому соглашению. Все будет размещено в главном компоненте «Приложение» верхнего уровня. Внутри этого компонента будут жить другие компоненты.
Подумайте, что вы собираетесь строить в первую очередь
Заманчиво просто начать стучать по клавишам и разбираться позже. Типа сначала задавайте вопросы, а потом всегда приводит к напрасной трате времени и нажатий клавиш. Если вы нарисуете и напечатаете то, что собираетесь сделать, ассоциации, компоненты, поток, у вас будет более приятный конечный продукт. Это приведет к меньшему количеству пересмотров и меньшему количеству повторений.
Для начала стоит вспомнить, что парадигма функционального программирования лучше всего подходит для React. Функциональное программирование использует чистые функции, которые всегда будут возвращать один и тот же результат при одном и том же входе. Это также означает отсутствие побочных эффектов. Это означает, что Компоненты должны быть максимально простыми и делать как можно меньше. На самом деле Компонент должен делать только одну вещь или следовать принципу единой ответственности. Если компонент начинает усложняться, его следует разбить на два компонента.
Что, если у нас есть серверная часть rails, обслуживающая данные JSON для приложения Hospital. В этом приложении у нас есть врачи, у которых есть пациенты. Эти Пациенты принадлежат Доктору. Естественно, у нас будет компонент «Доктор» и компонент «Пациент». Если мы просто скопируем данные, которые обслуживает API Rails, это упростит нам жизнь. У нас будет усеченный JSON-хеш доктора и его пациентов. На бэкенде у вас будет что-то вроде Doctor.find(1).patients. Это даст вам всех пациентов доктора №1. Эту структуру данных пациентов JSON можно превратить в полезный массив объектов, которые можно сопоставить. Например, вы можете вызвать [patients].map(patient =›{ ‹Patient name = {patient.name} age={patient.age} Disease={patient.disease} /›. Этот массив компонентов ‹Patient /› может быть вынесены на экран.
Здесь с somthing={somethingElse} то, что вы видите, называется реквизитом. Они большие в React и помогают формировать компонент. Родительский компонент будет передавать реквизиты своих дочерних компонентов. Итак, давайте представим, что компонент ‹Доктор/› создал компоненты ‹Пациент/›. Таким образом, компонент больницы будет передавать реквизиты ‹Patient/› Components. Эти дочерние элементы будут изменять состояние своего родительского компонента. Здесь, например, количество пациентов у Доктора будет изменено детьми-пациентами. Обычно так работает экосистема React. Не стесняйтесь заглядывать в React docs для получения дополнительной информации. См. также В чем разница с и props?
У нас есть Sate и Props, работающие в нашем приложении Hospital, но какие компоненты владеют состоянием? В React есть единый источник правды. Поскольку мы используем парадигму компонентно-ориентированного программирования, нам нужно то, что упоминается в реагировании как одностороннем потоке данных (щелкните эту ссылку для получения дополнительной информации). Состояние — это просто динамические данные, которые компонент использует для изменения самого себя или своего родительского компонента. Вы должны смотреть на компоненты с точки зрения состояния. Дозирует ли этот компонент использовать состояние для рендеринга () чего-либо на экране? Из-за одностороннего потока данных в React вы должны иметь владельца этого состояния и размещать его в нем. В нашем примере компонент ‹Доктор /› будет владельцем состояния числа пациентов.
