JavaScript — когда использовать функционал setState

Когда использовать функционал setState

TL; DR: Функциональный setState в основном полезен для ожидания корректного обновления состояния, когда несколько setState ов запускаются за короткий промежуток времени, когда, как и обычный setState выполняет согласование и может привести к неожиданному состоянию.

Пожалуйста, ознакомьтесь с этой замечательной статьей о Functional setState, чтобы получить четкое понимание

А вот и РАБОЧАЯ ДЕМО

Во-первых, вы пытаетесь делать разные вещи в каждом из ваших случаев, вы назначаете фотографии в одном и объединяете фотографии в другом.

Допустим, this.state.pictures содержит [1, 2, 3] а фотографии содержат [4, 5, 6]

this.setState({pictures: pics})

В приведенном выше случае this.state.pictures будет содержать фотографии, то есть this.state.pictures = [4, 5, 6]

 this.setState(prevState => ({ pictures: prevState.pictures.concat(pics) })) 

Принимая во внимание, что в приведенном выше фрагменте this.state.pictures будет содержать предыдущие изображения фотографии, то есть this.state.pictures = [1, 2, 3, 4, 5, 6]

В любом случае вы можете настроить его в соответствии с вашими потребностями API, если это похоже на разбитый на страницы ответ, вам лучше объединять результаты по каждому запросу, иначе, если вы будете получать весь массив каждый раз, просто назначьте весь массив.

Обычный setState VS Функциональный setState

Теперь ваш вопрос, вероятно, в основном заключается в том, использовать ли setState с объектом или с функцией.

Люди используют их по разным причинам, теперь функциональность setState считается безопасной, потому что React выполняет что-то, называемое процессом согласования, где объединяет несколько объектов внутри setState при частой или одновременной setState и применяет изменения в одном кадре, что-то вроде пакетный процесс. Это может привести к неожиданным результатам в сценариях, подобных приведенным ниже.

ПРИМЕР:

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

Как и следовало ожидать, счет будет увеличиваться на 3, но React объединяет все объекты и обновляет счет только один раз, т.е. увеличивает его на 1.

Это один из случаев, когда функциональный обратный вызов срабатывает, потому что согласование не происходит с функциями, и выполнение приведенного ниже кода будет работать так, как ожидалось, то есть обновить счет на 3

 increaseScoreBy3 () { this.setState(prevState => ({ score: prevState.score   1 })); this.setState(prevState => ({ score: prevState.score   1 })); this.setState(prevState => ({ score: prevState.score   1 })); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector