Комментарии 12
Автор, большое спасибо, давай еще! Использование спец механизмов для изменения состояния как я понимаю — вынужденная необходимость, иначе бы пришлось наследовать классы состояний от какого-то Observable и все стало бы еще сложнее
0
Спасибо большое за ваши труды. Очень хороший курс. Ждем следующий выпуск)
0
Огромное спасибо за перевод.
Там небольшая опечатка в методе handleClick(). return без буквы r написан:)
Там небольшая опечатка в методе handleClick(). return без буквы r написан:)
0
Объясните, пожалуйста, дураку почему обязательно использовать prevState?
И чем
Лучше
?
И чем
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
Лучше
this.setState({ count: this.state.count + 1 });
?
0
Из документации React:
this.setState является асинхронной функцией и поэтому несколько вызовов этой функции в одном цикле может привести к объединению этих вызовов. Например, если мы захотим увеличить количество товара на 1 больше одного раза за цикл, то получим следующий результат:
Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
…
)
Последующий вызов this.setState в одном цикле будет перезаписывать предыдущий, поэтому количество товара будет увеличено только один раз. Если новое состояние зависит от предыдущего, то мы рекомендуем использовать вариант setState с вызовом функции:
this.setState((state) => {
return {quantity: state.quantity + 1};
});
Документация
this.setState является асинхронной функцией и поэтому несколько вызовов этой функции в одном цикле может привести к объединению этих вызовов. Например, если мы захотим увеличить количество товара на 1 больше одного раза за цикл, то получим следующий результат:
Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
…
)
Последующий вызов this.setState в одном цикле будет перезаписывать предыдущий, поэтому количество товара будет увеличено только один раз. Если новое состояние зависит от предыдущего, то мы рекомендуем использовать вариант setState с вызовом функции:
this.setState((state) => {
return {quantity: state.quantity + 1};
});
Документация
0
Использовать конструкцию вида
означает создавать в каждом экземпляре класса одноименное свойство handleClick, а, следовательно, значит игнорировать аналогичный метод в прототипе.
Мне кажется это антипаттерн.
Есть ли среди читателей сего курса знатоки которые смогут парировать моё утверждение или порекомендовать лучшую практику для решения задачи сохранения контекста?
constructor() {
super();
...
this.handleClick = this.handleClick.bind(this)
}
означает создавать в каждом экземпляре класса одноименное свойство handleClick, а, следовательно, значит игнорировать аналогичный метод в прототипе.
Мне кажется это антипаттерн.
Есть ли среди читателей сего курса знатоки которые смогут парировать моё утверждение или порекомендовать лучшую практику для решения задачи сохранения контекста?
0
Думаю лучше передавать контекст через замыкание:
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={()=>this.handleClick()}>Change!</button>
</div>
)
}
0
Такой подход ещё хуже.
Смотри jsx-no-lambda tslint правило.
Суть в том что вы объявляете колбэк на каждой итерации render, что отрицательно сказывается на производительности.
Смотри jsx-no-lambda tslint правило.
Суть в том что вы объявляете колбэк на каждой итерации render, что отрицательно сказывается на производительности.
0
Спасибо за правило, буду знать. А как такой вариант?
Подсмотрел отсюда stackoverflow
constructor() {
super();
this.state = {
count: 0
};
}
handleClick = () =>{
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
};
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.handleClick}>Changed!</button>
</div>
)
}
Подсмотрел отсюда stackoverflow
0
можно оформить метод в виде стрелочной функции
handleClick = () => {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов