Состояние и реквизит!!!
Людей обычно смущают состояние и реквизиты компонентов... в том числе и я в какой-то момент.
Да, состояние и реквизиты в чем-то похожи друг на друга.
Но есть некоторые поразительные различия между ними.
Что это такое?
Давайте узнаем!
Кстати, я Агбедюле Кехинде Фавор.
Теперь вернемся к нашей теме.
Состояние против реквизита
О чем они?
Состояние — это то, что управляется внутри компонента и может меняться со временем.
Он включает данные, которые являются частными или локальными для компонента.
Поэтому локальное состояние компонента совершенно невидимо для других компонентов.
Но реквизиты содержат данные, переданные компоненту.
Допустим, это свойство компонента.
Характеристика модификации
Реквизит компонента нельзя изменить.
Это связано с тем, что это вход только для чтения.
Если вы попытаетесь присвоить ему значение, вы получите это.
Да, и мы не хотим этого, не так ли?
С другой стороны, состояние компонента можно изменить.
Но к этому прилагается одно твердое правило.
Это то, что компонент не может получить доступ к состоянию другого компонента, не говоря уже о его изменении.
В дополнение к этому, я бы посоветовал, если у вас есть часть данных в компоненте, которая все еще будет изменяться с течением времени, эти данные следует вводить в состояние компонента, а не вводить его. в качестве реквизита.
Всегда ли компонентам нужно состояние?
Иногда компонент может не нуждаться в состоянии.
Он может получить все свои данные из своего реквизита (вероятно, потому что нет необходимости что-либо изменять)
С учетом сказанного, позвольте мне привести вам пример.
Допустим, в вашем приложении есть компонент панели навигации с заголовком и именем пользователя .
Вы хотите использовать компонент панели навигации в другом компоненте вашего приложения, чтобы отображать его в этом компоненте.
Если вам нужна дополнительная информация о том, о чем я говорю, прочтите эту статью
Вернуться к моему объяснению
Когда вы закончите рендеринг и он появится в вашем браузере, вы скажете:
" Проблема решена".
Но допустим, вы хотите иметь другой заголовок на панели навигации в этом компоненте.
Что вы делаете?
Возможно, создаете еще один компонент панели навигации?
Это было бы довольно напряжно и грязно.
Здесь на помощь приходит реквизит.
Кстати: реквизит может быть любым. В данном примере это строка, но они также могут быть числами, массивами, объектами, функциями и т. д.
function Navbar(props) {
return (
<div>
{props.title}
</div>
</div>
{props.username}
</div>
)
}
Деструктурированный реквизит
function Navbar({title,username}) {
return (
<div>
{title}
</div>
</div>
{username}
</div>
)
}
Это будет выглядеть так;
<Navbar title="title 2" />
И тогда у вас будет свой настраиваемый компонент панели навигации через реквизит.
ПРЕДУПРЕЖДЕНИЕ
Вы не можете изменить реквизит, как я уже говорил ранее (Характеристика модификации).
Вы не можете использовать этот блок кода там, где пытаетесь изменить свойства.
function Navbar(props) {
props.title = "greet"
return (
<div>
{props.title}
</div>
)
}
И для состояния.
Допустим, вы хотите, чтобы имя пользователя менялось каждый раз, когда пользователь входит в систему.
В этом случае вы должны ввести его в состояние, чтобы иметь возможность изменять данные.
Вывод
Данные в состоянии находятся под частным контролем его компонента.
Состояние можно рассматривать как временную память компонента
Пока
Реквизит можно назвать свойством компонента, и его можно использовать для настройки компонента.
Теперь вы видите эти концепции в новом свете?
С учетом сказанного, я надеюсь, что это было полезно для вас.
Вы можете оставить свои комментарии.
Вы можете оставить некоторые 👏👏👏, если они есть.
А также помочь одному человеку найти это значение.
Вы можете подписаться на меня, если вам это нравится и вы хотите получить больше пользы.
Большое спасибо за ваше время!
Agbejule Kehinde Favour.
Всем мир!
