Краткое вступление в setState в React.js

kratkoe vstuplenie v setstate v reactjs?v=1656636371

от Раджеша Пиллая

Как эффективно использовать setState и каких ловушек следует избегать

0*OhUk2Ct_kQ78DO1M
Управление государством не должно походить на сбор кубика Рубика 🙂

TL; DR — Если вы зрительно учитесь, посмотрите видео, которое я сделал: ReactJS — Как работает setState

Или посмотрите здесь:

Знакомство с setState

Первое, о чем следует знать, это тот факт, что функция setState в React работает в асинхронном режиме. Это может смутить некоторых разработчиков, поскольку значения состояния доступны сразу после обновления.

Есть два варианта использования 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(        <div>         <div>render->state={this.state.value} -              {this.state.message}         </div>         <button onClick={this.onClick}>Click-setState</button>               </div>     );   }}

Теперь мы смонтируем эту программу к нашему корневому узлу DOM.

ReactDOM.render(  <App />,   document.getElementById("root"));

Приведенный выше код во время выполнения отображает значения и сообщения объекта состояния, а также отображает кнопку.

Если вы посмотрите на обработчик щелчков, у нас есть две последовательные функции setState, которые получают доступ к this.state.

Мы ожидаем, что после нажатия кнопки правильное значение состояния должно отображаться в следующем div (извлечено для справки):

<div>render->state={this.state.value} -      {this.state.message}</div>

The this.state.message содержит значение из this.state.value

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

Давайте посмотрим на результат этого.

Первоначальный результат показан ниже, поскольку начальное значение равно 0.

1*XJSgTpbY1uJmdKJDWYxHKQ

После первого щелчка мы ожидаем следующего результата:

render->state=1 -click-state 1

но вместо этого мы получаем это:

1*gwTie8l4onwKgloeOCXItA
несоответствие значения состояния

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

1*WPzoGxDaOgd91EEnNwPH-Q

Сейчас вы можете дремать или чесать голову 🙂

0*finEoFAqAty_kvoo
Фото Джекмана Чиу на Unsplash

Функция onClick().

Итак, посмотрим на функцию onClick(), чтобы понять проблему.

1*GHPR2qbIGr-EoWoxg5Jo4w

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

Мы исправим это, используя функциональный аспект setState.

Чтобы продемонстрировать поправку, давайте создадим еще одну кнопку:

<button onClick={this.onClickfn}>Click-setState fn</button>

И добавьте новый обработчик кликов onClickfn(), как показано ниже

1*crfPkk3iZn0LWjQ48cyaMA
setState(fn)

Вышеприведенный метод использует функциональный параметр в setState.

Это может быть функция стрелки, как показано выше или обычная функция ES5.

Эта функция принимает два параметра в качестве аргументов: первый — prevState, а второй — props (если вам также нужны props, передаваемые от родительского компонента). Здесь мы рассматриваем только предыдущее состояние.

PrevState выше касается функции setState, поскольку это последнее обновление. Это будет всегда указывать на правильное значение.

Давайте посмотрим результат после нескольких щелчков. При нажатии второй кнопки вы увидите, что значения всегда синхронизированы.

1*JJxtwtGrlULXMplQVL643A

В приведенном выше примере вы видите, что использование функционального параметра setState правильно группирует предыдущее состояние, и вы получаете предполагаемые значения состояния.

Еще одна оговорка, о которой мы должны знать: setState() принимает еще одну функцию обратного вызова, выполняемую после успешного обновления значений состояния.

Это очень удобно в ситуации, когда вам нужно проделать определенную операцию после успешного обновления setState.

Давайте посмотрим последний пример.

Предположим, что мы хотим зарегистрировать значение состояния после обновления, и мы пишем код, как показано ниже. Для этого я использую обработчик onClickfn().

1*UyMTLi70kI2pMzpQKq8qAQ

Но давайте посмотрим console.log и проверьте, правильно ли значение или нет. После трех кликов вы получаете следующий статус:

1*91u86QfsxY6Kx5HmNWbf2A

Вы заметите, что зарегистрированное значение не является последним обновленным значением. Давайте поправим это и посмотрим результат.

1*-RUif3etCRJuK6oeoCj3JA

В вышеприведенном примере мы используем второй параметр обратного вызова setState(). Этот обратный вызов будет выполнен, когда setState() завершит работу.

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

1*P48JwStPYtR_fZiOxSF0Dg

Подведению

Я надеюсь, что эта небольшая статья прояснит некоторые неправильные представления о setState.

Полный исходный код доступен на jsbin.

Счастливого кодирования!

Учись со мной @Learner + Fullstack Coach (@rajeshpillai): https://twitter.com/rajeshpillai

Акция: специальный купон на сумму 10 долларов США для средних читателей на мой будущий живой курс ReactJS-Beyond the basics udemy, если вы хотите поддержать нашу обучающую программу с открытым исходным кодом. Овладение разработкой интерфейса за 12–20 недель

Добавить комментарий

Ваш адрес email не будет опубликован.