Понимание основ состояния в React

Изображение на обложке Эдмон Атто

Резюме:
— В Глава Один, познакомьтесь с React с помощью ES6. Если вы новичок в React, вам просто нужно освежить в памяти или вам нужно краткое введение в функции ES6, которые чаще всего используются в этой книге, ознакомьтесь с глава Один.

• В Глава вторая, познакомьтесь с компонентами React. Они являются строительными блоками любого приложения React, которое вы создадите. Идите вперед и просмотрите это глава если вы еще не знакомы с компонентами React, вернитесь сюда.

В предыдущих главах мы в основном имели дело с функциональными компонентами React, не требующими управления состоянием. Основное внимание в этой главе уделяется состоянию, его управлению и компонентам, использующим его в React.

Что такое государство?

Состояние — это объект JavaScript, который хранит динамические данные компонента и определяет поведение компонента. Поскольку состояние является динамическим, оно позволяет компоненту отслеживать изменение информации между рендерингами и делает его динамичным и интерактивным.

Состояние может использоваться только внутри компонента класса. Если вы предполагаете, что компоненту потребуется управлять состоянием, его следует создать как компонент класса, а не как функциональный.

Состояние похоже на props но в отличие от props, он является частным для компонента и контролируется исключительно указанным компонентом. В примерах из предыдущих глав поведение компонентов в основном зависело от props которые передаются им. В этих случаях компоненты, которые получают реквизиты, не имеют над ними контроля, потому что реквизиты доступны только для чтения.

В Проект Один из Глава 2, toys были приняты как props к Application компонента, а затем вниз к Toys составная часть. Для Toys компонент для получения контроля над toys данные, его следует сначала преобразовать в компонент класса, а toys данные должны быть добавлены в state.

Стоит отметить, что состояние в React неизменный, то есть состояние никогда не должно быть изменено/изменено напрямую, а изменения должны быть внесены в копию текущей версии состояния. Это дает такие преимущества, как предоставление возможности просматривать состояние в разные моменты времени и горячую перезагрузку приложений (автоматическая перезагрузка страницы в браузере при внесении изменений в код).

Добавление состояния к компоненту класса

class Greeting extends React.Component {
  render(){
    return <h1>I’m a component in need of some state!</h1>;
  }
}

Добавление состояния в Greeting компонент выше включает определение в компоненте класса функции-конструктора, которая присваивает начальное состояние, используя this.state.

class Greeting extends React.Component {

constructor(props) {
   super(props);
     // Define your state object here
     this.state = {
       name: ‘Jane Doe’
     }
   }

render(){
     return <h1>Hello { this.state.name }</h1>;
   }
}

Обратите внимание, что конструктор принимает props в качестве аргумента, которые затем передаются super(). Добавление super() это должен при использовании конструктора.

Прохождение props не требуется, если вы не используете их в компоненте. От Greeting компонент выше, проходить не обязательно props либо constructor или же super()то есть компонент можно записать так:

class Greeting extends React.Component {

constructor() {
    super();
    // Define your state object here
  }
  // Define your render method here
}

Однако документы React рекомендуют вам всегда проходить props чтобы гарантировать совместимость с потенциальными будущими функциями

Доступ к состоянию осуществляется с помощью this.state как видно в Greeting составные части h1 тег.

Состояние инициируется с помощью this.stateоднако все последующие изменения состояния выполняются с помощью this.setState. С использованием this.setState гарантирует, что компоненты, затронутые изменением состояния, повторно отображаются в браузере.

Исследование состояния с помощью инструментов React Developer

Один из способов ускорить ваше понимание React — использовать инструменты разработчика React, созданные командой Facebook. Мощь инструментов разработчика React наиболее очевидна, когда вам нужно отладить приложение React, глубоко погрузившись в код. Эти инструменты позволяют вам исследовать, как React работает под поверхностью, когда приложение отображается в браузере.

Установка инструментов React Developer

Инструменты разработки доступны для загрузки на обоих Дополнения Mozilla Firefox и Интернет-магазин Chrome. Перейдите по соответствующей ссылке, чтобы установить инструменты разработки в зависимости от того, какой браузер установлен на вашем компьютере.

В остальной части этой книги Chrome будет использоваться в качестве предпочтительного браузера. Чтобы подтвердить успешную установку devtools в Chrome, откройте окно инструментов разработчика, используя Cmd+Opt+I на Mac или Ctrl+Alt+I на ПК с Windows. Теперь вы должны увидеть вкладку React.

Использование React Devtools

С Greeting компонент из ранее в этой главе, визуализированный в вашем браузере, откройте инструменты разработчика и перейдите на вкладку React. Вы должны увидеть что-то похожее на это

Овладение React DevTools позволит вам лучше понять внутреннюю работу React и быстро отлаживать приложения React.

Проект третий

Чтобы лучше понять основные варианты использования состояния в React, мы создадим простое приложение, которое позволит нам создавать и отображать записи.

Что мы построим

Приложение React, которое позволяет нам отслеживать действия наших друзей. names а также ages. Приложение предоставляет форму, которую мы будем использовать для ввода их данных. Затем он отображает детали наших друзей в красивых карточках Bootstrap 4.

Готовое приложение выглядит так:

Начиная

Загрузите или клонируйте стартовые файлы проектов из хранилище на свой компьютер, чтобы вы могли следить за ним.

Чтобы запустить примеры кода из этой главы на своем компьютере, вы должны сначала установить сервер глобально, используя NodeJS. Ниже приведена команда для установки http-server на вашей машине. Откройте свой терминал и запустите: —

npm install http-server -g

После завершения установки cd в Глава 3 папка, затем стартовый код папка. Внутри запустите команду ниже, чтобы запустить сервер: —

http-server .

Если вы вносите изменения в код, и они не отображаются в браузере даже после обновления, попробуйте жесткий освежающий эту вкладку или страницу.

Ниже показано, что будет показано в браузере, когда вы откроете URL-адрес локального хоста, отображаемый в вашем терминале.

Внутри src/index.jsесть простой компонент класса, который отображает JSX для формы с name а также age поля, и save кнопка.

Добавление состояния к компоненту

Для того, чтобы отобразить names а также ages добавлен в приложение, нам нужно добавить состояние к нашему Application составная часть. Мы начнем с добавления состояния по умолчанию, которое содержит фиктивное имя и возраст, которые будут отображаться всякий раз, когда страница отображается в браузере.

Мы делаем это, инициируя состояние с помощью this.state внутри компонента constructor метод такой:

constructor(props) {
  super(props);
  this.state = {
    data: [
      {
        name: ‘John’,
        age: 20
      }
    ]
  }
}

Если вы следуете инструкциям, скопируйте и вставьте фрагмент в Application компонент непосредственно перед функцией рендеринга.

Отрисовка данных из состояния

Чтобы отобразить данные о состоянии, Card Компонент презентации определен с функциональностью для отображения name а также age от props перешел к нему, как показано ниже.

const Card = props =>
  <div className=”col-md-6 col-lg-3">
    <div className=”card mb-3">
      <div className=”card-body”>

<p className=”card-title”>
          <span>Name: </span>{props.info.name}
        </p>

<p className=”card-text”>
          <span>Age: </span>{props.info.age}
        </p>

</div>
   </div>
 </div>;

Добавь это Card компонент index.js файл под Application компонент, но перед ReactDOM код.

Чтобы отобразить данные в состоянии, нам нужно получить доступ к массиву данных, используя this.state.data а затем используйте JavaScript map функция для перебора массива, чтобы каждый из его элементов отображался на странице.

<div className=”row”>
  {
    this.state.data.map(info => <Card info={info}/>)
  }
</div>

Заявление, содержащее Card компонент помещается в строку Bootstrap, чтобы он отображался в сетке Bootstrap и размещался сразу после второго <hr/> внутри компонента класса render функция.

После этого в браузере отобразится карточка, как показано ниже.

Проверка консоли в окне инструментов разработчика выявляет ошибки, как показано на снимке экрана ниже.

Это означает, что мы должны дать каждому Card элемент а key чтобы React мог идентифицировать каждый Card и знать, что делать, когда происходят изменения в любом из них. Это легко исправить с помощью map функция.

map функция принимает функцию, которая принимает два аргумента, элемент массива (info) и это index; это означает, что мы можем использовать index как key к Card составная часть.

Измените код, чтобы он соответствовал коду в приведенном ниже фрагменте.

<div className=”row”>
  {
    this.state.data.map(
      (info, index) => <Card key={index} info={info}/>
    )
  }
</div>

Это должно устранить ошибку в консоли.

С использованием index как key в map обычно хорошо работает для небольших приложений, данные которых не так динамичны. Однако по мере того, как приложения и источники данных становятся больше, использование index как key становится ненадежным. В этих случаях рекомендуется использовать действительно уникальный keyнапример id. В приведенном выше проекте каждому объекту в состоянии может быть назначено id поле и это id затем можно использовать как key вот так; key={info.id}.

Добавление данных формы в состояние

Приложение является неполным без функциональности для добавления новых names а также ages через форму. Для этого требуется знание обработка пользовательского ввода , тема, которая рассматривается в следующей главе. Мы пока остановимся здесь и завершим сборку приложения в Глава 4.

Если вы нашли эту статью хоть немного полезной, нажмите 👏 кнопку и помогите мне донести ее до большего числа людей, которым нужна помощь в начале работы с React. Я также был бы признателен за ваши ответы с вашими мыслями — какими бы они ни были. Я на Твиттер если вам нужно поболтать.