Автор оригинала: FreeCodeCamp Community Member.
Rajesh Pillai
Как эффективно использовать SetState и какие ловушки избегают
TL; DR – Если вы визуальный учащийся, отправляйтесь на видео, которое я сделал: Rectjs – как setState работает
Или просмотреть это здесь:
Введение в SetState
Первое, что нужно знать о том, что функция SetState в реагированных работах работает в асинхронной моде. Которые могут отключить некоторые разработчики вверх, так как значения состояния не доступны после обновления.
Существует два варианта использования SetState: на основе объекта подход и функциональный подход.
Давайте посмотрим как в действии. Мы получим проблему с помощью объекта на основе SetState в процессе.
Давайте создадим простое приложение.
class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} ); }}Теперь мы монтируем это приложение к нашему узлу корня DOM.
ReactDOM.render(, document.getElementById("root"));
Приведенный выше код при выполнении отображается значение и сообщение из объекта состояния, а также отображает кнопку.
Если вы посмотрите на обработчик Click, у нас есть два последовательных функция setState, которые получают доступ к этому значение.
Поведение, которое мы ожидаем, что когда кнопка нажала, правильное значение состояния должно быть отображено в нижнем div (извлеченном для справки):
render->state={this.state.value} - {this.state.message}
this.state.message Содержит значения из this.sate.value.
Мы ожидаем, что как значения состояния должны быть одинаковыми, когда кнопка нажала.
Давайте посмотрим на вывод этого.
Начальный выход показан ниже, поскольку значение равно 0 для начала.
После первого щелчка мы ожидаем, что ниже вывод:
render->state=1 -click-state 1
Но мы получаем это вместо этого:
Во втором щелчке вывод все еще несовмешится, как показано ниже.
К настоящему времени вы можете быть обернуть или царапать голову:)
Функция OnClick ()
Итак, давайте посмотрим на функцию OnClick (), чтобы понять проблему.
Поскольку вызов SetState является асинхронным до того, как может быть завершено первое выполнение SetState, ссылка на вторую настройку может указывать на предыдущее значение, а не первый текущий обновленный.
Мы исправим это, используя функциональный аспект setstate.
Чтобы продемонстрировать исправление, давайте создадим еще одну кнопку:
И добавить новый обработчик щелчка OnClickFN (), как показано ниже
Вышеуказанный способ использует функциональный параметр в setState.
Это может быть функция стрелки, как показано выше или нормальная функция ES5.
Эта функция принимает два параметра в качестве аргументов: первое – превышение, а вторая – реквизиты (если вам также нужен реквизит, который передается из родительского компонента). Здесь мы ищем только превзойти.
Вышеводиться выше, связано с функцией SetState, так как это последнее обновленное состояние. Это всегда будет указывать на правильное значение.
Давайте посмотрим на вывод после нескольких кликов. Вы обнаружите, что значения всегда синхронизируются при нажатии на вторую кнопку.
В приведенном выше примере вы можете видеть, что использование параметра функционального STATSTATE правильно преодолевает предыдущее состояние, и вы получаете предсказуемые значения состояния.
Еще одно предупреждение, которое нам нужно знать: setState () требует еще одна функция обратного вызова, которая выполняется после успешного обновления состояний.
Это очень удобно в ситуации, когда вы должны сделать некоторую операцию, как только SetState успешно обновляются.
Давайте посмотрим окончательный пример.
Предположим, мы хотим войти в систему состояния после обновления, и мы пишем код, как показано ниже. Я буду использовать обработчик OnClickFN () для этого.
Но давайте посмотрим console.log и проверить, правильно ли значение или нет. После трех кликов вы получаете этот статус:
Вы соблюдаете, что зарегистрированное значение не является последним обновленным значением. Давайте исправим это и увидим вывод.
В приведенном выше примере мы используем параметр обратного вызова STETSTATE (). Этот обратный вызов будет выполнен после завершения SetState ().
Давайте посмотрим последний вывод с вышеуказанным модифицированным кодом.
Обертывание
Я надеюсь, что эта небольшая статья очищает некоторые заблуждения о SetState.
Полный исходный код доступен в jsbin Отказ
Счастливое кодирование!
Учитесь со мной @learner + The Fullstack Coach (@rajeshpillai): https://twitter.com/rajeshpillai.
Продвижение: Специальный купон $ 10 для средних читателей для моего предстоящего живого Reactjs – за пределы основы Курс на Увенми в том случае, если вы хотите поддержать нашу учебную программу с открытым исходным кодом Овладение Frontend Engineering через 12-20 недель