Обзор

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

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

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

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

Итак, мы попробуем создать поле ввода для ввода нашего Хоббита и текстовый контейнер (текстовый элемент h3) для отображения текста в поле ввода, это позволит нам продемонстрировать, как можно обновить состояние.

Мы создаем пустой текстовый атрибут для хранения вводимого текста.

constructor(props) {
  super(props);
  this.state = { 
    text: "Your Hobbit..."
  };
  //We define the text that is going to be rendered under the text element and updated 
}

Теперь давайте визуализируем элементы (поле ввода и текстовый элемент), мы будем использовать загрузку для добавления стиля к элементам.

render() {
    return (

{this.state.text}

); } //We use the Onchange Event to store the input text each time it gets changed

Under the h3 element, we use the state.text in order to tell it to render the input text since later on, we are going to store the text under the state object.

Also, As you can see we have used the onChange event, and add a listener to the event which is the handleInputChange method under our class context, so under this method we will store the typed text and store under our state object

handleInputChange(e) {
  //Check if the Input is Empty
  if (e.target.value == "") { 
    /*We use the setState for updating a state so react would no that something has changed and 
     treys to Rerender the component */
    this.setState({
      text: "Enter your Hobit..."
    });
   }
  else { 
  //We set the state using the event that we receive to get the input text 
  this.setState({ text: e.target.value });
  }
}

Теперь вы можете открыть веб-страницу, чтобы проверить, изменился ли текст.

Хорошо, давайте попробуем добавить новый текстовый элемент, который будет содержать число, и кнопку, которая будет использоваться для увеличения числа всякий раз, когда мы нажимаем на нее, в этом случае мы увидим, как мы можем использовать метод setState в еще один формат, который очень важен для нас.

...
render() {
  ...
  return (

{this.state.counter}

{ this.SetState( (prevState) =› ( {counter: prevState.counter + 1} ) ) } }›Increment++ ); /* Теперь мы передаем в метод setState обратный вызов, который содержит предыдущее состояние в качестве аргумента, чтобы мы могли получить предыдущее значение счетчика и увеличить его на counter = lastCounter + 1 */ } ...

); }

Мы можем напрямую определить обратный вызов (и встроенное определение), не определяя метод класса, а затем ссылаясь на него в прослушивателе событий в событии onClick.

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

Теперь попробуйте нажать кнопку, и число должно увеличиться, Круто!

Вот как на самом деле вы можете использовать состояние для обновления компонента React и повторного рендеринга элементов, чтобы применить изменения и к DOM.

Что дальше

В следующем видеоруководстве мы попытаемся создать что-то классное с помощью React и посмотрим, как несколько компонентов могут работать вместе. Также мы рассмотрим Flux, поскольку он помогает в управлении состоянием и делегировании событий.