Этот пост будет посвящен данным, используемым с компонентами React. Если вы новичок в React и никогда не использовали его, прочтите первую часть этого руководства, где вы узнаете, что такое компоненты React и React.
Данные
Можно и прекрасно сделать компоненты с жестко закодированными данными внутри них. Для этого есть варианты использования. Это может быть компонент изображения, который всегда показывает одно и то же изображение и инкапсулирует для него правила CSS. Чаще всего компонент будет отображать вывод на основе некоторых данных, либо внутренних данных компонента, либо внешних данных. Внутренние данные - это то, что мы называем состоянием, а данные, которые передаются компоненту, - это свойства.
Штат
Как я уже упоминал, состояние - это данные внутреннего компонента. Это означает, что эти данные хранятся в компоненте и хранятся в нем.
Чтобы лучше понять, в каком состоянии находится компонент, давайте начнем с примера. Мы могли бы создать компонент Counter, который показывает, сколько раз была нажата кнопка в компоненте. Эти данные тесно связаны с компонентом, и только компонент Counter должен знать значение счетчика. Родительский компонент не должен знать об этом значении. По этой причине это относится к состоянию компонента.
Эти значения можно изменить только в компоненте, который их создал, в данном случае в компоненте Counter. Их можно передать дочернему компоненту, который может их использовать, но дочерние компоненты не могут их изменять.
Реквизит
Свойства - это значения, которые передаются компоненту. Как упоминалось в конце предыдущей части, компоненты не могут вносить изменения в эти данные, просто их считывают.
Есть много причин, по которым мы хотели бы использовать свойства вместо состояния. Может быть, мы хотим разделить компонент на более мелкие части, может быть, у нас есть какой-то логический слой сверху, который мы хотим изолировать, или, может быть, у нас есть какой-то многоразовый кусок, который мы хотим исключить. Но чтобы пояснить, что такое реквизит, я воспользуюсь примером телефонной книги.
У нас может быть компонент PhoneBook, содержащий список контактов в его состоянии. Что мы могли бы сделать, так это создать цикл, который бы добавлял блок кода, содержащий данные контакта. Другой способ структурирования - вместо компонента PhoneBook мы могли бы также использовать компонент Contact. Этот компонент Контакт будет иметь общий стиль и структуру для отображения сведений о контактах. Однако отображение будет отличаться для каждого контакта, например. имя, номер телефона и т. д. Это информация, которая содержится в компоненте Телефонная книга. Теперь мы можем иметь PhoneBook, используя компонент Contact и передавая контактные данные через реквизиты для рендеринга.
Как упоминалось ранее, компонент не может изменять свойства, но свойства могут быть любыми. Включая функцию. И некоторые из этих переданных функций могут изменить опору где-нибудь наверху дерева. Это может быть хорошим решением, когда речь идет об одном уровне различий, как в нашем примере с PhoneBook и Contact. Однако, когда дело доходит до большего количества уровней, это может стать очень беспорядочным.
Обновление представления
Каждый раз при изменении свойств или состояния компонент будет повторно визуализироваться. Однако это зависит от того, обновляется ли это свойство или значение состояния.
Если мы обновляем состояние, нам нужно использовать специальную функцию, предоставляемую React. Как только мы выполним эту функцию для установки нового значения, React знает, что этот компонент необходимо повторно отрендерить. Если мы изменим это значение каким-либо другим способом, это не сработает.
Если реквизиты меняются, нам не нужно ничего делать, React самостоятельно определит, что его нужно повторно отрендерить. Но в целях оптимизации при проверке обновлений не выполняется глубокая проверка. Проверяет только ссылки. Это означает, что если мы передаем объект и изменяем только одно его свойство, компонент, получающий этот объект, не обновляется. Что нам нужно сделать, чтобы запустить повторный рендеринг, так это создать новый объект, который является копией исходного с измененным этим единственным свойством.
Состояние и опора
Всегда идет обсуждение того, что принадлежит государству, а что следует принимать в качестве реквизита. Правда в том, что на этот вопрос нет универсального ответа, и это зависит от ситуации.
Мы могли бы взглянуть на ранее упомянутый компонент Counter. Этот Компонент звучит очень просто: Компонент, содержащий число и кнопку, увеличивающую значение этого числа. Нет необходимости иметь данные где-либо за пределами этого компонента. Это могло бы немного усложнить, если бы нам понадобился какой-то особый дизайн для отображения числа. У него может быть анимация изменений и блестящие эффекты. Поскольку теперь у нас более сложный дизайн, мы можем разделить отображение значений на новый многоразовый компонент CounterValue. Теперь этот компонент просто получает номер как опору для отображения.
В этом случае у нас все еще есть все данные, привязанные к состоянию Counter. Давайте еще больше усложним. Что, если бы мы хотели определить начальное значение, которое мы можем изменить? Мы могли бы изменить Counter, чтобы он принимал опору initialValue, чтобы мы могли использовать эту опору для установки начального значения счетчика, а затем увеличивать CounterValue при каждом щелчке.
Этот пример может быть немного сложнее, чем должен быть, но он показывает, как требования влияют на вашу структуру и поток данных. В зависимости от этого у вас может быть все как состояние, но у вас также может быть несколько уровней глубины в компоненте и требуются реквизиты.
Компоненты без сохранения состояния
Одна из новых функций React - это компонент без состояния. Это компоненты, определенные как функции, не имеющие состояния. Это более новая и более сложная тема, поэтому я не буду вдаваться в подробности по этому поводу, но важно упомянуть об этом. Обычно нам нужны компоненты меньшего размера без лишней логики. Вот почему у нас теперь есть такие компоненты.
Заключение
В этой статье я хотел объяснить, как можно получить доступ к данным в компонентах. В React есть еще много других частей, но прежде чем двигаться дальше, важно понять состояние компонентов и свойства. В следующей части этого вступления я объясню этапы жизненного цикла компонента React и то, как компонент проходит через них.
Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn или GitHub.
Подпишитесь на нас в Twitter 🐦 и Facebook 👥 и присоединитесь к нашей группе Facebook 💬 .
Чтобы присоединиться к нашему сообществу Slack 🗣️ и читать наши еженедельные темы о Фавнах 🗞️, нажмите здесь⬇
