Рубрики
Без рубрики

Понимание SetState / Usestate в реакции

В этом блоге я буду отвечать на вопрос «Как использовать SetState / Usestate в классе и функцию … Помечено с помощью React, SetState, Usestate, JavaScript.

В этом блоге я отвечаю на вопрос «Как использовать SetState/Usestate в классе и компонентах функции?» Прежде чем мы ответим на этот вопрос, мы немного обсудим то, что точное состояние в реакции.

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

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

Как получить доступ к состоянию компонента?

Состояние компонента может быть доступно как другие объекты, используя this.state.property_name.

  • Примечание. В компоненте класса мы назначаем начальное состояние в нашем конструкторе.

Пример:

class Sports extends React.Component {
  constructor(props) {
    super(props)

  this.state = {
    sports: ['basketball', 'football', 'soccer'],
    count: 0
  }

  render() {
    return (
      

        
 I have played {this.state.count} sport(s) 

      

    );
   }
  }
}

Как обновить состояние компонента с использованием компонентов класса против функциональных компонентов?

Компоненты класса

Существует два типа компонентов в реакции. Существует классный компонент и функциональный компонент. Компоненты класса вызывают метод конструктора () и установите начальное состояние. Затем мы можем изменить состояние дальше, вызывая STETSTATE.

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

//вместо этого ;

//Do это this.setState ({Название: «Майкл Джордан»});

Функциональный компонент

В функциональных компонентах мы можем использовать реактивные крючки. Крючок – это специальная функция, которая позволяет подключить к «функциям реагирования». Ранее мы должны были преобразовать функцию в класс, если нам нужно добавить какое-то состояние. Теперь мы можем использовать крючок внутри функционального компонента.

В отличие от компонента класса, у нас нет «этого» в компоненте функции, поэтому мы не можем назначить или читать это . Вместо этого мы называем крючком stuestate прямо внутри нашего компонента. Крюк USESTATE – это крючок, который позволяет нам добавлять состояния реагирования на функциональные компоненты.

Usestate () это новый способ использовать то же самое возможности, что и Это обеспечивает в классе. Единственный аргумент к крюку USESTATE () является начальным состоянием.

Пример

import React, {useState} from 'react';

function Example() {
  const [count, setCount] =useState(0);

Заключение

Это завершает наш обзор setState ()/umestate (). То, что нужно запомнить:

  1. Не изменяйте состояние напрямую. Модифицируя это непосредственно с произведением неправильного поведения, вызывающее его не перенаправить
  2. Нам не нужно звонить SetState каждый раз, когда мы меняем перемезу. Мы называем STETSTATE только тогда, когда мы хотим изменение переменной, чтобы отразить на UI экрана.
  3. Мы импортируем крючком до реагирования в USEState. Это позволяет нам сохранить локальное состояние в функциональном компоненте.

Оригинал: “https://dev.to/thedanielleellis/understanding-setstate-usestate-in-react-h4f”

Читайте ещё по теме: