webBG - програмисти, машинно обучение, javascript, python, php, питам, говорим, публикации

промяна на множество състояния в кука useState() на реакция js

Така че се чудех какво всъщност се случва, когато променя повече от едно състояние в манипулираща функция. Дали и двете ще бъдат актуализирани едновременно или ще бъдат изпълнени един след друг.

const [x, setX] = useState(0)
const [y, setY] = useState(0)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

И какво, ако една държава зависи от други?

const handlerFunction = () => {
  setX(x+1)
  setY(x+1)
}

или какво ако

const [x, setX] = useState(0)
const [y, setY] = useState(x)

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}
reactjs javascript react-hooks
15.12.2019

Отговори:


1

Нищо никога не се изпълнява едновременно в JavaScript*, така че актуализациите на състоянието се извършват една след друга. Но тъй като и двете се извършват асинхронно, няма да видите x или y актуализация до следващото изобразяване, така че ще се появи едновременно от ваша гледна точка.

Така че и в трите случая по-горе крайните стойности за x и y след еднократно извикване на handlerFunction() ще бъдат 1 и 1.

Също така имайте предвид, че тъй като x и y са просто променливи, стойностите им така или иначе не могат да се променят синхронно, поради което виждате стойностите им да се актуализират само при следващото изобразяване.

Само за да сте наясно обаче, че е добра практика да използвате функционални актуализации когато промените в състоянието ви разчитат на предишното състояние:

const handlerFunction = () => {
  setX(x => x + 1)
  setY(y => y + 1)
}

Това гарантира, че всяка актуализация е атомична операция.

*Освен ако нямате работа с работни нишки

15.12.2019

2

Задаването на състояние е асинхронно по природа, така че -

const handlerFunction = () => {
  setX(x+1)
  setY(x+1) // here the old value of x will be taken and the outcome value of x and y     will be different //                   
}

Тук -

const [x, setX] = useState(0)
const [y, setY] = useState(x) // this is just to initialize an initial value to your state y so it will be once set to the value of x and then it doesn't depends on x//

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}
15.12.2019

3

https://github.com/facebook/react/issues/14259

Пакетите на React актуализират състояние, ако са задействани от събитие, базирано на React

Така че, ако извикате манипулатора от onClick, onChange, onBlur... React ще приложи множеството актуализации едновременно. Ако извикате манипулатора от Promise или setTimeout, актуализациите ще бъдат извикани отделно.

Ако една променлива на състоянието зависи от друга, предлагам да ги групирате в обект като по-долу:

const [obj, setObj] = useState(() => ({x: 0, y: 0}));

const handlerFunction = () => {
  setObj(prevObj => {
    const newVal = prevObj.x + 1;
    return {x: newVal, y: newVal};
  });
};
15.12.2019
Нови материали
Създайте разширение за Chrome с помощта на Angular
Този урок е базиран на манифеста на разширението на chrome версия 3 (MV3), а също и на Angular версия 2+ (2, 3 и...). Ако не сте използвали манифест версия 3, можете да следвате този урок ,..
За да научите нов език за програмиране, започнете отначало
Първоначално публикувано на http://www.mberlove.com/blog/a-new-programming-language-starting-over/ Програмистите се гордеят със способността си да усвояват лесно нови умения , разчитайки..
5 Youtubers на Data Science, които трябва да следвате
Защото всички можем да се справим с малко продуктивно отлагане Всички сме падали в заешката дупка на Youtube, така че защо да не я направим продуктивна?! Като непрекъснато нарастващ източник..
Бих казал, че точно това е проблемът с Twitter — това е инструмент на суперпотребител.
Бих казал, че точно това е проблемът с Twitter — това е инструмент на суперпотребител. По същия начин, по който суперкодерът сочи vim като единствения начин за кодиране, но останалите от нас..
Основи на Gradio
Gradio е най-ефективният метод за демонстриране на вашия модел на машинно обучение и разполага с удобен за потребителя онлайн интерфейс, който го прави достъпен от всяко място. Какво прави..
Илюстрация (GIF) за обяснение на дълбоки конволюционни мрежи (DCNN)
В света на компютърното зрение най-основният и често срещан алгоритъм за разпознаване на изображения е конволюционната мрежа. С популярността на рамки като tensorflow и pytorch, стана по-лесно да..
Python Bootcamp — Data Science Day 165
Python Bootcamp от Giles McMullen-Klein беше абсолютно невероятно. Джайлс има този уникален начин да улови аудиторията си, като същевременно прави съдържанието на курса много интересно...