Как правильно принудительно обновить состояния класса?

Question

[Paxest]

Доброго времени суток!
Мне было необходимо, чтобы счетчик изменял значение состояния не через один раз, а постоянно, ведь известно, что setState() действует асинхронно.

Для этого я помещаю пустую функцию, чтобы он обновлялся сразу. Использую такого вида запись:

this.setState({ text: this.state.text.slice(0, -1)}, () => {})

Нашел еще один способ:

this.setState(function(state, props) {
 return {      
   text: this.state.text.slice(0, -1)
 }});

или через функцию

// outside your component class
 function increaseScore (state, props) {
    return {score : state.score + 1}
 }
class User{
 …
// inside your component class
 handleIncreaseScore () {
   this.setState( increaseScore)
 }
…
 }

Но хотелось бы не городить каждый раз функции, и я подумал, что возможно есть способ сделать это через componentWillReceiveProps() и shouldComponentUpdate().
Вопрос: как правильно принудительно обновить состояния класса? И можно ли сделать это через методы жизненного цикла?

Comments

[Антон Спирин]

Для этого я помещаю пустую функцию, чтобы он обновлялся сразу.

Вы, видимо, где-то что-то не так поняли. Передача колбека никак не влияет на процесс обновления состояния.

Нашел еще один способ:
или через функцию

Функцию передают, чтобы получить и использовать предыдущее состояние. Только и всего.

Похоже, что вы увидели примеры на просторах интернета, но неправильно поняли какие возможности они демонстрируют.

Вопрос: как правильно принудительно обновить состояния класса?

Вызовами this.setState и статическим методом getDerivedStateFromProps

Вы лучше покажите код с которым у вас возникли проблемы и опишите чем поведение компонентов отличается от ожидаемого.

[Paxest]

Антон Спирин,
https://codepen.io/igor-sushko/pen/jRGvOZ
Дело вот в чем:
Сделал сравнение типов, которые сам и задаю, три типа: Numbers, Operations, Equals. Есть состояния lastType и newType. Я их сравниваю. И по идее compareTypes должен их сравнить и написать true или false.
строки 148 и 150. Если я обращаюсь к CompareTypes не из setState, а после него, то при несоответсвии lastType и newType у меня не всегда обновляется значение на false. Это связано с тем, что setState() все кладет в стек, и берет последнюю операцию(как я это понял из этой статьи статья) А если это делать сразу из setState, то все работает.

[Антон Спирин]

Paxest, тут либо автор статьи не прав, плохо понимает основы JavaScript и своими домыслами вводит в заблуждение, либо это очень неумелый перевод:

С учетом того что мы выяснили о setState() — итоговое значение score будет не 3, а 1, потому что React не вызывает setState 3 раза, а делает из него один следующий вызов this.setState({score : this.state.score + 1});

На самом деле все происходит не так. Просто код:

this.setState({ score : this.state.score + 1 });
this.setState({ score : this.state.score + 1 });
this.setState({ score : this.state.score + 1 });

при score = 0 эквивалентен:

this.setState({ score : 0 + 1 });
this.setState({ score : 0 + 1 });
this.setState({ score : 0 + 1 });

Три обновления состояния на одно и то же значение 1.
То, что обновление происходит асинхронно, позволяет избежать лишних перерисовок. Она будет всего одна.

Как тут помог бы колбек:

this.setState({ score : this.state.score + 1 }, () => {
  this.setState({ score : this.state.score + 1 }, () => {
     this.setState({ score : this.state.score + 1 });
  });  
});

Так как функция колбек выполнится после обновленя, то и значение this.state.score будет получено после обновления И код при score = 0 будет эквивалентен:

this.setState({ score : 0 + 1 }, () => {
  this.setState({ score : 1 + 1 }, () => {
     this.setState({ score : 2 + 1 });
  });  
});

Как тут помогла бы передача функции первым аргументом:

this.setState(prevState => ({ score: prevState.score + 1 }));
this.setState(prevState => ({ score: prevState.score + 1 }));
this.setState(prevState => ({ score: prevState.score + 1 }));

В этом случае мы вообще не используем состояние на момент вызова хандлера. Актуальное состояние передается в функцию на момент обновления. И при score = 0 три последовательных обновления можно было бы представить так:

({ score: 0 }) => ({ score: score + 1 }) // первое
({ score: 1 }) => ({ score: score + 1 }) // второе
({ score: 2 }) => ({ score: score + 1 }) // третье

Но в вашем случае, как и в подавляющем большинстве, проще просто объединить все обновления в один вызов.

[Paxest]

Антон Спирин, спасибо огромное за такой подробный и развернутый пример, вы очень помогли в понимании темы! Пробежал оригинал статьи и откровенно да, перевод не важный. Например, это:
" React, оптимизируя свою работу, может на несколько вызовов setState( ) — лишь один раз обновить состояние приложения."
является переводом этого:
" React may batch multiple setState() calls into a single update for performance."
Чтобы это грамотно перевести - надо быть в теме.

Хочется уточнить: если один класс запрашивает недавно изменившееся состояние родительского объекта, то он в любом случае получит свежее состояние или бывают случаи когда свежее состояние не дойдет до дочернего класс, а он уже выполнит работу?

[Антон Спирин]

Paxest, он в любом случае получит актуальное состояние. Другое, что если в нем реализован метод shouldComponentUpdate, то он может не обновиться:

class Parent extends React.Compоnent {
  state = { value: 'value' };
  
  render() {
    return <Child value={this.state.value} />;
  }
}

class Child extends React.Compоnent {
  shouldComponentUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      return false;
    }
    return true;
  }
}

В этом случае если state в родителе изменится, компонент не будет перерисован.

Еще стоит добавить, что в примере с тремя вложенными колбеками, будет три перерисовки и вообще колбек setState вызывается после render.

[Paxest]

Антон Спирин, спасибо! в теме setState можно пару дней провести.. посмотрел справку и после как-то не хочется больше писать таким образом -
this.setState({someState: "string"})
думаю, что буду всегда использовать callback функции для перестраховки, а то мало ли что. Надеюсь, что это не будет считаться плохим кодом.

Answer 1

[Антон Спирин]

Для решения вашей проблемы вам достаточно обновлять все данные одним вызовом:

onClick(e) {
  const { value, type } = e.target.dataset;

  this.setState({
    letter: this.state.letter + value,
    lastType: this.state.newType,
    newType: type,
    compareType: type === this.state.newType,
  });
}

Comments

[Paxest]

Спасибо большое!