Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

[Maksim87]

Автор, большое спасибо, давай еще! Использование спец механизмов для изменения состояния как я понимаю — вынужденная необходимость, иначе бы пришлось наследовать классы состояний от какого-то Observable и все стало бы еще сложнее

[Vimal]

Спасибо большое за ваши труды. Очень хороший курс. Ждем следующий выпуск)

[Palllke]

Огромное спасибо за перевод.
Там небольшая опечатка в методе handleClick(). return без буквы r написан:)

[ru_vds]

исправили

[DonAlPAtino]

Объясните, пожалуйста, дураку почему обязательно использовать prevState?
И чем

this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })

Лучше

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

?

[vlast92]

Из документации 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};
});
Документация

[webbrother]

Использовать конструкцию вида

constructor() {
  super();
  ...
  this.handleClick = this.handleClick.bind(this)
}

означает создавать в каждом экземпляре класса одноименное свойство handleClick, а, следовательно, значит игнорировать аналогичный метод в прототипе.
Мне кажется это антипаттерн.

Есть ли среди читателей сего курса знатоки которые смогут парировать моё утверждение или порекомендовать лучшую практику для решения задачи сохранения контекста?

[vlast92]

Думаю лучше передавать контекст через замыкание:

render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={()=>this.handleClick()}>Change!</button>
            </div>
        )
}

[webbrother]

Такой подход ещё хуже.
Смотри jsx-no-lambda tslint правило.
Суть в том что вы объявляете колбэк на каждой итерации render, что отрицательно сказывается на производительности.

[vlast92]

Спасибо за правило, буду знать. А как такой вариант?

    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

[webbrother]

Этот вариант очень похож на вариант с .bind. Здесь метод тоже прописывается в экземпляре класса, а не в прототипе.

[Dufor]

можно оформить метод в виде стрелочной функции

handleClick = () => {
  this.setState(prevState => {
    return {
      count: prevState.count + 1
    }
  })
}