React.js для початківців - пояснення щодо реквізиту та стану

React.js - одна з найбільш широко використовуваних бібліотек JavaScript, яку повинен знати кожен розробник інтерфейсу. Розуміння того, що таке реквізит і стан, та відмінності між ними є великим кроком на шляху до навчання React.

У цьому дописі в блозі я пояснить, що таке реквізит і стан, а також пояснить деякі найпоширеніші запитання щодо них:

  • Що таке реквізит?
  • Як ви передаєте дані за допомогою реквізиту?
  • Що таке держава?
  • Як ви оновлюєте стан компонента?
  • Що відбувається при зміні стану?
  • Чи можу я використовувати стан у кожному компоненті?
  • Які відмінності між реквізитом та державою?
Якщо ви повністю новачок у React, у мене є серія підручників про React для початківців.

Що таке реквізит?

Props - це скорочення властивостей, і воно використовується для передачі даних між компонентами React. Потік даних React між компонентами є односпрямованим (від батьків до нащадка).

Як ви передаєте дані за допомогою реквізиту?

Ось приклад того, як дані можна передавати за допомогою реквізиту:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

По-перше, нам потрібно визначити / отримати деякі дані з батьківського компонента та призначити їх атрибуту “prop” дочірнього компонента.

"Ім'я" - це визначена програма, що містить текстові дані. Тоді ми можемо передавати дані за допомогою реквізиту, наче ми надаємо аргумент функції:

const ChildComponent = (props) => { // statements };

І нарешті, ми використовуємо крапкові позначення для доступу до даних проп і рендерингу їх:

return 

{props.name}

;

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

Що таке держава?

У React є ще один спеціальний вбудований об'єкт, який називається state, що дозволяє компонентам створювати власні дані та керувати ними. Отже, на відміну від реквізиту, компоненти не можуть передавати дані зі станом, але вони можуть створювати та управляти ними внутрішньо.

Ось приклад, що показує, як використовувати стан:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Як ви оновлюєте стан компонента?

Держава не повинна змінюватися безпосередньо, але вона може бути змінена за допомогою спеціального методу setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Що відбувається при зміні стану?

Добре, чому ми повинні використовувати setState( )? Навіщо нам взагалі потрібен сам державний об’єкт? Якщо ви задаєте ці питання, не хвилюйтеся - скоро зрозумієте стан :) Дозвольте відповісти.

Зміна стану відбувається на основі вводу користувачем, ініціювання події тощо. Крім того, компоненти React (із станом) відображаються на основі даних у стані. Держава зберігає вихідну інформацію.

Отже, коли стан змінюється, React отримує інформацію та негайно повторно робить DOM - не весь DOM, а лише компонент із оновленим станом. Це одна з причин, чому React швидкий.

І як React отримує сповіщення? Ви здогадалися: с setState( ). setState( )Метод запускає процес повторного рендеринга для оновлених частин. React отримує інформацію, знає, яку частину (частини) змінити, і робить це швидко, не переробляючи всю DOM.

Підсумовуючи, є 2 важливі моменти, на які нам слід звернути увагу при використанні стану:

  • Держава не повинна змінюватися безпосередньо - вона setState( )повинна використовуватися
  • Стан впливає на продуктивність вашого додатка, і тому його не слід використовувати без потреби

Чи можу я використовувати стан у кожному компоненті?

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

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

Якщо ваш проект не використовує React Hooks, тоді ви можете використовувати state лише в компонентах класу.

Які відмінності між реквізитом та державою?

Нарешті, давайте підсумуємо і побачимо основні відмінності між реквізитом та станом:

  • Компоненти отримують дані ззовні за допомогою реквізиту, тоді як вони можуть створювати та управляти своїми власними даними за допомогою стану
  • Реквізит використовується для передачі даних, тоді як стан - для управління даними
  • Дані з реквізиту доступні лише для читання і не можуть бути змінені компонентом, який отримує їх ззовні
  • Дані штату можуть бути змінені за допомогою власного компонента, але є приватними (до них неможливо отримати доступ ззовні)
  • Реквізит можна передавати лише від батьківського компонента дочірньому (односпрямований потік)
  • Модифікація стану повинна відбуватися з setState ( )методом

React.js - одна з найбільш широко використовуваних бібліотек JavaScript, яку повинен знати кожен розробник інтерфейсу.

Сподіваюся, ця стаття допоможе вам зрозуміти реквізит і стан. Є також інші важливі речі, про які слід розповісти про React, і я буду продовжувати писати про них пізніше в наступних статтях.

Якщо ви хочете дізнатись більше про веб-розробку, сміливо стежте за мною на Youtube !

Дякую за читання!