Короткий вступ до setState у React.js

Як ефективно використовувати setState і яких підводних каменів уникати

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( render->state={this.state.value} - {this.state.message} Click-setState ); }}

Тепер ми змонтуємо цю програму на наш кореневий вузол DOM.

ReactDOM.render( , document.getElementById("root"));

Вищезазначений код при виконанні відображає значення та повідомлення від об'єкта стану, а також відображає кнопку.

Якщо ви поглянете на обробник клацань, у нас є дві послідовні функції setState, які отримують доступ до значення this.state.

Очікувана нами поведінка полягає в тому, що при натисканні кнопки правильне значення стану повинно бути відображено в нижченаведеному div (витягнуто для довідки):

 render->state={this.state.value} - {this.state.message} 

this.state.messageМістить значення зthis.state.value

Ми очікуємо, що обидва значення стану повинні бути однаковими при натисканні кнопки.

Подивимось результат цього.

Початковий вихідний результат показано нижче, оскільки для початку значення дорівнює 0.

Після першого клацання ми очікуємо наступного виводу:

render->state=1 -click-state 1

але ми отримуємо замість цього:

При другому клацанні вихід все одно не збігається, як показано нижче.

На даний момент ви можете дрімати або дряпати голову :)

Функція onClick ()

Тож давайте поглянемо на функцію onClick (), щоб зрозуміти проблему.

Оскільки виклик setState є асинхронним до завершення першого виконання setState, посилання на другий setState може вказувати на попереднє значення, а не на перше поточне оновлене.

Ми виправимо це за допомогою функціонального аспекту setState.

Щоб продемонструвати виправлення, давайте створимо ще одну кнопку:

Click-setState fn

І додайте новий обробник клацань наClickfn (), як показано нижче

Вищезазначений метод використовує функціональний параметр у setState.

Це може бути функція стрілки, як показано вище, або звичайна функція ES5.

Ця функція приймає в якості аргументів два параметри: перший - prevState, а другий - реквізит (у випадку, якщо вам потрібен також реквізит, який передається від батьківського компонента). Тут ми розглядаємо лише prevState.

Вище попереднє стан відноситься до функції setState, оскільки воно є останнім оновленим станом. Це завжди вказуватиме на правильне значення.

Давайте подивимося результат після декількох клацань. Ви побачите, що значення завжди синхронізуються, коли ви натискаєте другу кнопку.

У наведеному вище прикладі ви можете бачити, що використання функціонального параметра setState правильно поєднує попередній стан, і ви отримуєте передбачувані значення стану.

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

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

Подивимось остаточний приклад.

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

Але давайте побачимо console.logта перевіримо, чи є значення правильним чи ні. Після трьох кліків ви отримуєте такий статус:

Ви помітите, що зареєстроване значення не є останнім оновленим значенням. Давайте виправимо це і подивимось результати.

У наведеному вище прикладі ми використовуємо другий параметр зворотного виклику setState (). Цей зворотний виклик буде виконаний після завершення операції setState ().

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

Підведенню

Сподіваюся, ця невеличка стаття прояснить деякі помилкові уявлення про setState.

Повний вихідний код доступний на jsbin.

Щасливого кодування!

Дізнайся зі мною @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Promotion: Special $10 coupon for medium readers for my upcoming live ReactJS-Beyond the basics course on udemy in case you wish to support our open source curriculum Mastering frontend engineering in 12 to 20 weeks