Есть пример кода:
class Conditioner extends React.Component {
constructor(props) {
super(props);
this.state = {temperature: 0};
// Привязка необходима, чтобы сделать this доступным в коллбэке
this.onIncrease = this.onIncrease.bind(this);
this.onDecrease = this.onDecrease.bind(this);
}
onIncrease(){
this.setState(prevState => ({
temperature: prevState.temperature + 1
}))
}
onDecrease(){
this.setState(prevState => ({
temperature: prevState.temperature - 1
}))
}
render() {
return (<p>
<h2>Текущая температура: {this.state.temperature}</h2>
<button onClick={this.onDecrease}>-</button>
<button onClick={this.onIncrease}>+</button>
</p>);
}
}
В методах onIncrease и onDecrease есть место:
this.setState(prevState => ({
temperature: prevState.temperature + 1
}))
Понятно что prevState это параметр который мы посылаем в функцию onClick={this.onDecrease}, но где вызов этой функции с данным параметром? И каким образом вместо this.state.temperature, у нас получилось prevState.temperature? Где и как определена связь между this.state и prevState? Они как будто синонимы... Но как так получилось?
Объясните пожалуйста как это работает. Спасибо.
prevState = this.state в момент вызова this.setState.
Разберем по шагах:
По клику на <button> срабатывает переданная в onClick функция this.onIncrease.
После вызова this.onIncrease вызывает метод this.setState.
У setState может быть 2 аргумента:
this.setState((prevState, props) => ({ temp: prevState.temp + 1 }), callback),
где (prevState, props) => ({ temp: prevState.temp + 1 }) - первый аргумент - функция, которая возвращает новое значения this.state, а callback - второй аргумент - функция, которая срабатывает после завершения обновления this.state (не сразу).
Ми получаем (prevState, props) от React автоматически в момент вызова setState.
Где и как определена связь между this.state и prevState?
Связь между ними обеспечивает сам React без нашего вмешательства.
Подробней можно прочитать в документации
Сборка персонального компьютера от Artline: умный выбор для современных пользователей