Первоначально опубликовано на linguinecode.com.
Обычный вопрос новичков для инженеров, изучающих React: «В чем разница между свойствами и состоянием?» Или погуглите «React: props vs state».
Я часами пытался понять разницу, когда только начинал, и обнаружил, что большинство статей учат этому неправильно.
Большинство статей начинаются с изучения того, что в первую очередь означает props, а во вторую — React state. Но я думаю, что это неправильный способ узнать, что такое состояние и свойства React и как они работают вместе.
Итак, мы начнем с изучения того, что такое состояние React.
Состояние реакции
Давайте начнем с определения того, что такое состояние React.
Состояние реакции — это объект.
Состояние React может быть частным или общедоступным для его дочерних компонентов.
Состояние React может содержать информацию, влияющую на вывод компонента React.
Состояние реакции в действии
Первый блок кода, который мы видим, — это простое приложение для реакции на кошку. Цель этого приложения для кошек - прибить каждое определение, перечисленное выше.
Теперь давайте создадим наше состояние React.
Вот как это было легко!
Но этот пустой объект состояния бесполезен, пока мы не начнем добавлять в него какие-то данные.
Итак, мы собираемся добавить новое свойство (не свойства компонента React) к этому объекту состояния и добавим пару событий JavaScript для обработки добавления нового имени кота.
Хорошо, это очень быстро усложнилось! Но я очень легко разобью его для вас.
Во-первых, у нашего объекта состояния есть 2 новых свойства.
nameOfNewCat будет содержать новое имя для вашей кошки, пока мы его набираем.
cats — еще одно новое свойство, которое будет содержать список имен ваших кошек.
В нашем методе render() я добавил тег ввода и привязал 2 действия к кнопке и тегу ввода.
Это важно отметить, поскольку каждое действие (handleChange и handleAddCatClick) изменяет объект состояния.
Давайте разберем действие handleChange, чтобы вы могли понять, как правильно изменить состояние.
Обратите внимание, как мы используем this.setState(). Это правильный способ изменения любого свойства в объекте состояния React.
В традиционном JavaScript вы обычно изменяете объект напрямую. Но на практике это большое нет.
Это связано с тем, что непосредственное изменение состояния может создать ситуацию, когда эти изменения могут быть перезаписаны и вызвать несогласованность в приложении.
setState не изменяет напрямую, а создает отложенный переход состояния.
Еще одна важная вещь, которую следует отметить, это то, что когда вы обновляете свое дерево состояний React, оно изменяет только первый уровень свойств.
Хм??
Посмотрите на пример ниже, чтобы понять, что я имею в виду.
Как обновить вложенные объекты состояния с помощью setState()
P.S. приведенный ниже пример не является частью приложения для кошек, над которым мы работаем.
На изображении выше показан пример объекта состояния, который имеет такие свойства, как имя, возраст и лайки для собак и кошек.
Если вы запустите setState для изменения значения name, то React сохранит другие определенные значения и изменит только свойство name.
Вы можете подумать, что изменится только изменение определенного свойства, а остальные значения останутся такими, какие они есть. Но вы ошибаетесь, если так думаете.
Как показано выше, если мы обновим лайки для котов до false. Вы увидите, что объект состояния удалил наш лайк для dogs. И все мы любим собак!
Чтобы сохранить лайки для собак, мы должны указать setState, что мы хотим сохранить наши предыдущие вложенные значения.
В ES6 мы можем сделать нечто, называемое оператором распространения. И как вы видите в окончательных результатах, мы сохраняем нашу любовь к собакам и меняем нашу любовь к кошкам.
Состояние реакции, влияющее на вывод
Мы обсудили, что такое состояние React и как добавлять и обновлять данные состояния React.
Ваш следующий вопрос может звучать так: «Как мы отображаем данные, которые мы сохранили в состоянии?»
Это делается действительно легко.
В нашем приложении для кошек нам просто нужно получить свойство cats из вашего объекта состояния React и отобразить разметку для каждого кота.
На изображении выше вы будете перебирать каждую кошку, используя метод массива .map(), чтобы создать новый тег li, который выводит введенное имя кошки. .
Вывод должен выглядеть примерно так.
На данный момент мы создали приложение React cat, которое использует состояние для сохранения и отображения данных.
Теперь мы должны понять, как свойства React хорошо взаимодействуют с состоянием.
Определение реквизита React
Давайте начнем с определения того, что такое реквизит React.
React props — это входные данные, описывающие то, что мы должны увидеть.
Выше приведен пример простого текстового поля, и я вставил ввод type, равный тексту.
И если я добавлю еще один ввод с именем placeholder, мое поле ввода будет выглядеть по-другому для пользователя.
вводитравные реквизиты.
Точно так же это работает с компонентами React. Давайте взглянем.
Передача данных состояния в качестве реквизита
В том же файле вы можете создать новый компонент React с именем Cat. Cat будет ожидать свойство с именем name.
Теперь вы обновите код в компоненте CatApp, где вы отображаете список имен кошек.
Все, что вы здесь делаете, — это передаете имя кота, которое мы сохранили в нашем объекте state, и передаете его как prop в созданный вами компонент Cat.
Затем компонент Cat отобразит введенное имя и отобразит имя в HTML-теге элемента списка.
Вывод
Понимание состояния и свойств React может показаться сложным и несколько запутанным.
Но изучение его в правильном порядке может помочь вам понять его быстрее и лучше.
Состояние — это объект, который содержит частные или общедоступные локальные данные о компоненте. И его можно использовать для влияния на вывод компонента.
Реквизиты — это не что иное, как входные определения для описания того, что вы должны увидеть.
