На протяжении моего пути изучения React две вещи явно выделялись среди толпы как одни из самых важных концепций, которые необходимо понять. Состояние и реквизит. Кто они такие? Когда вы их используете? Вы должны всегда их использовать ?. Поначалу эти концепции трудно понять, но однажды их понимание значительно упростит понимание React.
Что такое свойства и состояние?
Реквизит
Props (сокращение от properties) - это конфигурация Компонента. Они получены от своего родителя и неизменны в отношении получающего их Компонента. Свойства могут быть значениями, объектами, содержащими значения, или функциями обратного вызова.
Состояние
Состояние - это структура данных, которая начинается со значения по умолчанию при монтировании компонента. Он может видоизменяться со временем, в основном в результате пользовательских событий.
Может ли свойство изменять состояние и собственные свойства?
Короткий и невероятно ленивый ответ - да, вроде как. Длинный ответ - да ... но через путешествие шагов, которое слишком длинно, чтобы описать его одним предложением, поэтому, пожалуйста, продолжайте чтение. Свойство может содержать в себе функцию обратного вызова, данную ему его родительским элементом и определенную в родительском элементе, которая при запуске обновляет состояние… в свою очередь, изменяя свойства, предоставленные ему его родительским элементом. Если все еще не понятно, вы можете посмотреть видео об этом ЗДЕСЬ.
Как изменить состояние?
Вы можете изменить состояние в React с помощью функции, которая вызывает метод React this.setState (). Это позволяет вам обновлять состояние, но не изменять состояние напрямую.
Как мы называем использование реквизита?
Теперь у вас есть опора, как вы ее используете? Есть два способа вызвать опору.
- this.props.propName
- props.propName.
В React есть два типа компонентов: компоненты класса и функциональные компоненты, вы можете узнать больше об этих двух ЗДЕСЬ.
В компонентах класса мы используем this.props.propName, поскольку мы вызываем реквизиты для экземпляра этого конкретного класса.
Однако в функциональных компонентах мы используем props.propName, поскольку мы уже передаем свойства в качестве аргумента.
Передача реквизита от родителя к ребенку
В React вы можете передавать реквизиты от родителя к потомку, определяя их в компоненте на основе родителя.
Использование свойств для установки состояния
Теперь, когда ваш ребенок получил данные от своего родителя, он может использовать эти данные разными способами, например, для установки своего состояния.
Это нормально, особенно с данными, которые ВООБЩЕ не будут меняться. Однако возникает вопрос: как установить состояние со значениями, которые могут изменяться? (Отказ от ответственности: следующее используется только в редких случаях).
Здесь в игру вступает getDerivedStateFromProps. Вы можете изучить этот ЗДЕСЬ, однако тот факт, что на официальной странице React есть блог, в котором обсуждается, почему вам, скорее всего, не нужно его использовать, следует сказать много.
О реквизитах и состоянии можно узнать гораздо больше, и я рекомендую вам прочитать еще немного об этих концепциях. Как только вы поймете свойства и состояние, React станет намного понятнее.
