React - это только «V» часть MVC, и поэтому он не зависит от того, как вы проектируете свой пользовательский интерфейс.

Если не уделять должного внимания, достаточно большое приложение для реагирования может быстро уступить место беспорядку компонентов с отслеживанием состояния, каждый из которых имеет собственное мнение, что быстро нарушит способ реагирования на действия.

При создании с React необходимо учитывать несколько ключевых моментов:

  1. Компоненты без сохранения состояния
  2. Состав
  3. Централизованное управление состоянием с Redux

Компоненты без сохранения состояния

Ваши компоненты должны быть максимально апатичными; например, ваши компоненты не должны запускать собственное состояние, вместо этого они должны зависеть от переданных в props.

Это делает ваши компоненты предсказуемыми и легко тестируемыми, поскольку они ведут себя как чистые функции. Принимайте данные и выводите JSX.

Композиция

Это подход, состоящий из двух частей:

  1. Разбиение сложного компонента на более мелкие управляемые части
  2. Составление сложного пользовательского интерфейса из общих пользовательских компонентов

Разбиение сложного компонента на более мелкие управляемые части

Скажем, у вас есть такой компонент:

С высоты птичьего полета это не совсем понятно. Слишком много div с именами классов.

Кроме того, если нам нужно отобразить другой пузырь чата, возможно, для системных сообщений с похожим нижним колонтитулом, мы не сможем этого сделать. Это все тесно связано.

И в довершение всего, вот как мы используем вышеуказанный компонент:

<ChatBubble 
    sentBy={message.sentBy} 
    messageContent={message.content} 
    time={message.time}/>

При любых обновлениях заголовка пузыря чата мы должны возиться со всем файлом компонента.

Не обновляя использование, мы можем просто разбить ChatBubble вот так:

Header & Footer может быть в собственном файле и импортирован сюда. Но беглый взгляд на ChatBubble, и мы видим, что теперь это изменение делает его более читаемым.

Мы знаем, что в нем есть верхний и нижний колонтитулы. Все идет нормально.

Составление сложного пользовательского интерфейса из общих пользовательских компонентов

Теперь предположим, что у нас есть два типа сообщений: одно, которое пользователи отправляют друг другу в виде текста. Другие, которые включают галерею изображений. Все остальные детали, такие как верхний и нижний колонтитулы, остаются прежними.

В нашей текущей реализации это значительно затруднительно.

Мы могли бы написать сложную логику, чтобы понять, messageContent включает ли изображения и разделить их, и применить все виды темной магии, чтобы заставить это работать.

Или, может быть, мы могли бы сделать что-то вроде этого:

Проверьте раздел тела. Мы сделали {props.children}. Это означает, что сюда передается любой дочерний элемент компонента.

А на месте звонка сделайте так:

Теперь мы можем отображать сообщения чата по своему усмотрению.

Завтра, когда появится третий вид сообщения чата, возможно, от бота, в то время как верхний и нижний колонтитулы останутся прежними, мы просто обновим способ отображения содержимого тела из компонента, который использует ChatBubble.

Код использован повторно :)

Централизованное управление состоянием с Redux

Redux делает состояние нашего приложения предсказуемым, сохраняя его в центральном хранилище / хранилище.

Единственный способ обновить состояние - выпустить actions, которые имеют формат:

{
    type: String,
    payload: Any
}

Пример:

{
    type: 'SET_USER_DETAILS',
    payload: {
        user: {
            _id: 1,
            name: 'John Doe'
        }
    }
}

Эти действия передаются чистым функциям, называемым reducers, которые используют действие и возвращают новую версию состояния. Затем это сохраняется в хранилище, и все функции, подписывающиеся на эту часть дерева состояний, уведомляются.

Пример UsersReducer.js

Пользовательский интерфейс может использовать эти данные следующим образом:

Каждый раз, когда значение хранилища изменяется, компонент User будет получать обновления.

Узнайте о редуксе из этого умного курса Дэна Абрамова.

Спасибо за прочтение.

Нажмите * хлоп *, если вы думаете, что это того стоило :)

Найдите меня в linkedin или вернитесь ко мне в комментариях.

Нанять лучших ReactJs Frontend разработчиков на Prolanceer.com

Prolanceer.com - это экономичная, прошедшая предварительную проверку рыночная платформа для найма независимых профессионалов в области программного обеспечения на фрилансе или по контракту