Обновление состояния в React

Обзор

В этом руководстве мы рассмотрим обновление состояния в React.

Цели

  • Обновление состояния в компоненте класса
  • Обновление состояния в функциональном компоненте

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

Если начальное значение выглядит следующим образом,

this.state = {
     hasBeenClicked: false,
};
Войдите в полноэкранный режим Выйти из полноэкранного режима

Тогда обновление состояния выглядит следующим образом,

this.setState({
    hasBeenClicked: true
})
Войти в полноэкранный режим Выход из полноэкранного режима

Если начальное значение больше, чем значения в объекте ,

this.state = {
  theme: 'blue',
  addressInfo: {
    street: null,
    number: null,
    city: null,
    country: null
  },
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • Обновите тему следующим образом,
this.setState({
    theme: ‘red’,
})
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Обновить адресИнфо вот так,
this.setState({
  addressInfo: {
    ...this.state.addressInfo,
    city: "New York City",
  },
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Вызов функции после обновления состояния

  this.setState({
    hasBeenClicked: true
 },
   //This callback will fire once the state has been updated
  () => console.log(this.state.hasBeenClicked)// prints true
) 
Войти в полноэкранный режим Выйти из полноэкранного режима

Обновление состояния в функциональном компоненте

Базовая структура

const MyComponent = () => {
    const initialState = () => 1;
    const [value, setValue] = useState(initialState);
};

Вход в полноэкранный режим Выход из полноэкранного режима

Использование нескольких значений состояния

const [value, setValue] = useState({foo: "bar"});
setValue({foo: "foobar"});

Вход в полноэкранный режим Выход из полноэкранного режима
const [value, setValue] = useState({foo: "bar", test: “demo”});

setValue({...value, foo: "foobar"});
Or
setValue(prev => {...prev, foo: "foobar"});
Войти в полноэкранный режим Выход из полноэкранного режима

Заключение

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

Функциональные компоненты с состоянием часто быстрее в написании, чем их аналоги, основанные на классах. Более того, они могут сделать более очевидным то, что происходит в вашей кодовой базе, поскольку ссылки на state и setState() устраняются в пользу понятных имен переменных. В конечном счете, useState() обеспечивает гибкость и означает, что вам больше не нужно преобразовывать функциональные компоненты в компоненты класса, как только вам потребуется состояние.

Оцените статью
Procodings.ru
Добавить комментарий