Если вы новичок в разработке React, вы, вероятно, задаетесь вопросом или не понимаете, что такое state и props на самом деле. Не волнуйтесь, мы рассмотрим их в этом уроке.
Нет другого лучшего способа понять это, чем создать приложение, которое использует их обоих. Итак, в этой статье мы собираемся создать простое приложение и наполнить его поддельными данными.
Прежде чем мы начнем создавать приложение, позвольте мне дать краткое объяснение того, что такое состояние и свойства.
Состояние используется для хранения и доступа к данным в компоненте. Состояние доступно только для компонента, в котором оно было создано. К нему не может получить доступ внешний компонент. Вот тут-то и появляются реквизиты. Реквизиты используются для доступа к состоянию в других компонентах. Думаю, это самое простое определение. Подумайте о ресторане или закусочной быстрого питания без проезда или системы онлайн-заказа еды. Вы действительно должны пойти в тот ресторан быстрого питания, чтобы получить еду. Состояние на этой иллюстрации — это еда, продаваемая в ресторане, доступная только для людей в ресторане. Итак, думайте о реквизите как о системе онлайн-заказов или проезде, это позволяет вам получать еду, фактически не находясь в здании ресторана. Я надеюсь, что это упрощает его.
Теперь давайте начнем с приложения. Я использую приложение для создания реакции. Итак, поехали;
Теперь, когда наше приложение запущено; создадим компонент ViewFakeData и набор поддельных данных.
Теперь у нас есть два компонента: app и ViewFakeData и наши поддельные данные.
Теперь в нашем родительском компоненте App мы добавим конструктор и метод жизненного цикла componentDidMount, инициализируем наше состояние пустым в конструкторе, а затем установим состояние для созданных нами поддельных данных.
Следующее, что нужно сделать, это сопоставить наше состояние с тегом компонента ViewFakeData в нашем родительском компоненте.
Теперь о том, как инициализируется и используется состояние. Если бы нам нужно было визуализировать данные в нашем состоянии прямо в компонентном приложении, в котором они были объявлены, мы бы просто сопоставили наше состояние непосредственно с набором тегов HTML, и оно будет отображаться прямо в этом компоненте. Но в этом уроке мы не будем останавливаться только на состоянии. Теперь, когда мы сопоставили состояние с тегом компонента ViewFakeData, мы переходим к компоненту ViewFakeData и используем свойства, как показано ниже;
Если вы запустите приложение, вы должны увидеть что-то вроде этого;
Итак, это один из способов использования состояния и свойств в реакции. Если вам понравился этот урок, подпишитесь на мою среднюю страницу здесь и в твиттере @toyesebalogun.
