State и props — это некоторые из инструментов, которые делают React одним из самых мощных фреймворков javascript. Они имеют различия, но также тесно связаны. Чтобы лучше понять их, давайте начнем с их определения:
Состояние — это экземпляр класса компонента React, который можно описать как объект с заметными свойствами, управляющими поведением компонента. В общем, состояние компонента — это просто объект, который содержит некоторую информацию, которая может измениться в течение жизни этого компонента.
Ниже показан пример компонента под названием Login:
Компонент Login содержит состояние свойств имени пользователя и пароля. Значения формы в методе рендеринга настроены на отображение состояния имени пользователя и пароля соответственно. Когда компонент изначально монтирует состояние для имени пользователя и пароля, это просто пустые строки. функция changeHandler устанавливает состояние имени пользователя и пароля в любое время при изменении поля ввода. Каждый раз, когда вызывается setState, компонент перерисовывается, что обновляет текст, отображаемый в полях ввода. Состояние имени пользователя и пароля компонента Login — это объект, содержащий информацию, которая может меняться со временем.
Props — это специальное ключевое слово в React, которое относится к свойствам. Это в основном используется для передачи данных от одного компонента к другому. На изображении ниже показан пример передачи реквизита компоненту:
Компонент рендерит дочерний компонент с именем Course и передает ему реквизит с именем foundCourse. затем дочерний компонент может использовать эту опору. На изображении ниже показан дочерний компонент Course, использующий свойство foundCourse для рендеринга некоторых данных внутри свойства:
Подводя итог, можно сказать, что свойства и состояние различаются тем, что свойства используются для передачи данных, а состояние используется для хранения данных. Хотя между ними есть явные различия, важно также отметить, что они также связаны. Лучший способ объяснить эту связь состоит в том, что состояние одного компонента часто становится реквизитом дочернего компонента. В приведенном ниже примере показано состояние компонента, где состояние называется postArray и передается дочернему компоненту:
Еще одна важная вещь, которую следует отметить, это то, что с точки зрения ребенка опора неизменяема, то есть ее нельзя изменить. Если его нужно изменить, родитель должен просто изменить свое собственное состояние, которое затем будет автоматически передано дочернему элементу. Исходя из этого, вы можете спросить, а что, если ребенку нужно изменить свой реквизит? Этот экземпляр обычно обрабатывается через дочерние события и родительские обратные вызовы. Родитель передаст функцию дочернему элементу, на который дочерний элемент будет ссылаться, когда произойдет определенное событие. Когда это событие происходит, дочерний компонент ссылается на событие, которое затем сообщает родительскому компоненту об изменении состояния данных, которые он передает дочернему компоненту, и автоматически запускает повторный рендеринг с новыми данными для дочернего компонента. Это то, как состояние и свойства используются в React, и любому разработчику важно понимать, чем эти инструменты отличаются и связаны друг с другом.
Ресурсы:
Что такое «реквизиты и как их использовать в React?
В React используется другой подход к потоку данных и манипулированию ими, чем в других фреймворках, и поэтому это может быть сложно в …itnext.io»
