Некоторое время я работал с React и Redux над проектом, прежде чем меня спросили, в чем разница между props и состоянием в React. В тот момент я понял, что, хотя мне было комфортно работать с обоими, я не мог четко сформулировать различия между ними. Итак, я решил как прояснить различия для себя, так и, возможно, помочь другим сделать то же самое.
Общий обзор заключается в том, что реквизиты - это переменные, передаваемые от родительского компонента к дочернему компоненту с намерением только для чтения. С другой стороны, состояние состоит из переменных, которые инициализируются и обновляются непосредственно компонентом. Состояние, а не свойства, используется всякий раз, когда компонент будет обновлять данные.
БОЛЬШЕ О ПРОПСАХ
Свойства могут передаваться из родительского компонента внутри рендеринга дочернего компонента, как показано ниже. В этом примере дочернему компоненту передается метод и строковое свойство.
Передача метода от родительского компонента позволяет централизовать управление состоянием, поэтому ваше приложение может состоять в основном из более простых в управлении функциональных компонентов без сохранения состояния.
В приведенном выше примере также передается строка дочернему компоненту для упрощения, но это может также легко и, вероятно, чаще быть частью динамических данных, передаваемых дочернему компоненту.
С точки зрения дочернего элемента все свойства, переданные из родительского компонента, будут собраны в один объект свойств. Способ доступа к ним в дочернем элементе зависит от того, есть ли у вас функциональный или классовый компонент.
Ниже представлен простой функциональный компонент, использующий реквизиты, переданные родительским компонентом. Вы можете думать о реквизитах как о любом аргументе, переданном функции.
Реквизиты доступны только для чтения. Они не предназначены для изменения непосредственно из дочернего компонента. Однако их можно использовать для установки начального состояния, которое, как ожидается, будет динамически изменяться.
Для этого мы будем использовать компонент класса для дочернего элемента.
БОЛЬШЕ О ГОСУДАРСТВЕ
До добавления хуков в React, которые в этом посте не используются, для управления состоянием необходимо было использовать компоненты класса, потому что у них есть дополнительные функции локального состояния и методов жизненного цикла, к которым функциональные компоненты не имеют доступа. Ниже приведен пример дочернего компонента класса, который использует конструктор и super для наследования дополнительных функций этого компонента реакции.
В методе класса свойства, данные ему родительским компонентом, доступны с помощью this.props вместо props, как в вышеупомянутом функциональном компоненте. В этом случае мы используем реквизиты для установки начального состояния в конструкторе, который будет запускаться только при первом рендеринге этого компонента.
При любых изменениях состояния необходимо использовать this.setState, как показано в примере, что вызовет повторную визуализацию компонента для отображения обновления.
Важно помнить, что setState - это асинхронное действие, поэтому, если вы добавляете число или делаете что-то относительно текущего состояния, вам нужно будет передать первый аргумент prevState в setState, чтобы быть уверенным, что вы знаете, какое текущее значение вашего состояния в том, что вы меняетесь.
Для получения более подробной информации ознакомьтесь с разделами Компоненты и свойства и Состояние и жизненный цикл из документации React или в сообщении блога Робина Веруха Как передать свойства компонентам в React.
Узнайте о Использование хука useState для управления состоянием в React.
Я постоянно совершенствуюсь. Если у вас есть исправления или отзывы, я буду рад узнать и внести исправления. Спасибо!
