Посібник по React: об'ємний путівник з вивчення React.js у 2018

Компоненти — основні будівельні блоки React. Якщо ви працювали з Angular, то мали помітити подібність компонентів до директив. Якщо у вас не було подібного досвіду, то можете вважати, що компоненти схожі на віджети або ж модулі. Ви можете думати про компонент як про набір з HTML, CSS та JS, який має деякі внутрішні особливості, які властиві тільки компонентам. Мені подобається порівнювати компоненти React з пиріжками з начинкою, тільки зі світу веб-технологій. Вони можуть містити все, чого ви тільки забажаєте, й бути огорнуті в оболонку, що легко компонується. Компоненти реалізуються на чистому JavaScript, або ж використовують JSX. Якщо ви вирішили використовувати JSX, то вам буде легше розібратись, адже його ми й будемо використовувати у цій статті. Також вам знадобиться інтерпретатор для перетворення вашого JSX у JavaScript код, але до цього ми повернемось трохи пізніше.

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

Для прикладу вище приведено Twitter. Якщо ми спробуємо відтворити цю сторінку засобами React, то ми маємо розбити її на різноманітні компоненти (обведені у рамку). Зауважте, що вони можуть містити вкладені дочірні компоненти. Ми можемо назвати компонент зліва (у рожевій рамці) UserInfo. Усередині компонента UserInfo, розташовано інший компонент у (помаранчевій рамці), його можна назвати UserImages. Спосіб, у який батьківський компонент працює з дочірнім компонентом UserInfo, або навпаки — робота зі станом state, як власним, так і дочірнього компонента UserImages. Якщо ми хочемо використовувати будь-яку частину даних з батьківського компонента у дочірньому, то ми маємо передати ці дані до дочірнього компонента у якості атрибуту. У цьому прикладі передаємо компоненту UserImages всі зображення, які знаходяться у компоненті UserInfo. Надалі код буде детально описано і розібрано, проте я хочу, щоб ви зрозуміли загальну картину того, яким чином це відбувається. Ієрархія батьківських та дочірніх елементів спрощує керування даними, тому ми точно знаємо де дані знаходяться, а тому нема потреби маніпулювати ними в іншому місці.

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

• JSX — дозволяє нам використовувати HTML-подібний синтаксис, що буде трансформовано у легкі JavaScript об'єкти.

• Virtual DOM — JavaScript репрезентація наявного DOM дерева.

• React.Component — спосіб створення нового компонента.

• render (метод) — визначення UI окремого компонента.

• ReactDOM.render — рендеринг React компонента у DOM.

• state — внутрішнє сховище даних (об'єктів) компонента.

• constructor (this.state) — встановлює початковий стан компонента.

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

• props — дані, що передаються від батьківського до дочірнього компонента.

• propTypes — дозволяє вам контролювати існування, або типи окремих props, що передаються до дочірніх компонентів.

• defaultProps — дозволяє вам задавати компоненту props за замовчуванням.

Життєвий цикл компонента:

• componentDidMount — виконується після встановлення (mount) компонента.
• componentWillUnmount — виконується перед тим, як компонент буде знищено.
• getDerivedStateFromProps — виконується, коли компонент встановлюється або props змінюються. Використовується для оновлення стану компонента, коли props змінюються.

Події:

• onClick
• onSubmit
• onChange

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

На цьому етапі ви мали зрозуміти, як працює React на високому рівні, і тепер настав час зануритись у написання коду.

Створення першого компонента (JSX, Virtual DOM, render, ReactDOM.render)

Побудуймо наш перший React компонент. Для цього ми використаємо ES6 клас:

import React from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    )
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Зауважте, render — єдиний метод нашого класу. Кожен з компонентів містить метод render, оскільки він визначає UI нашого компонента. Тож у цьому прикладі, на екрані буде відображено текст Hello World!.

Насамперед, необхідно звернути увагу на те, що відбувається у ReactDOM. ReactDOM.render приймає два аргументи:

1. Компонент, який ви бажаєте відобразити;
2. DOM ноду у яку буде встановлено компонент.

Зауважте, що ми використовуємо ReactDOM.render замість React.render. Ці зміни було впроваджено в React 14, щоб зробити застосунки більш модульними. Це має сенс, якщо згадати, що React може рендерити не лише DOM елементи.

У прикладі вище ми визначаємо, яким чином React мусить взяти наш HelloWorld компонент і відобразити його в елементі з id root. Через архітектуру React, що успадковує відносини між компонентами за принципом «пращур — нащадок», вам необхідно буде використовувати у ваших застосунках лише один ReactDOM.render, адже рендеринг батьківського компонента відобразить всі вкладені в нього дочірні компоненти.

Можливо, вам дещо незвично міксувати HTML з JavaScript кодом. Адже з самого початку вивчення веб технологій вас вчили розподіляти логіку і шаблони розмітки. Ця парадигма має стійке обґрунтування, проте не позбавлена слабких сторін. Як тільки ви ближче познайомитесь з React, будь-які складнощі сприйняття коду відійдуть на другий план. HTML, який ви пишете у методі render, це не зовсім той HTML до якого ви звикли. Це JSX — він дозволяє нам писати HTML-подібний синтаксис, який згодом трансформується у легкі JavaScript об'єкти.

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

Дивлячись на приклад нижче ви зможете побачити на що перетвориться ваш JSX:

class HelloWorld extends React.Component {
 render() {
   return React.createElement("div", null, "Hello World");
 }
}

Тепер, ви можете відмовитись від використання JSX при створенні React компонентів. Проте я не знаю жодного розробника, який не користувався б JSX при роботі з React.

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

Процес виглядає приблизно так:

Деякі дії користувача змінюють стан вашого застосунку → повторний рендеринг virtual DOM → попередня версія virtual DOM порівнюється з новим virtual DOM → реальний DOM отримує тільки необхідні зміни.

Оскільки необхідно здійснювати перетворення JSX у JS, стає потреба налаштування фази трансформації, тому у наступній частині ми розповімо про Webpack і Babel.

Погляньмо, на наш путівник, ми вже поговорили про:

• JSX — дозволяє нам використовувати HTML-подібний синтаксис, що буде трансформовано у легкі JavaScript об'єкти.

• Virtual DOM — JavaScript репрезентація наявного DOM дерева.

• React.Component — спосіб створення нового компонента.

• render (метод) — визначення UI окремого компонента.

• ReactDOM.render — рендеринг React компонента у DOM.

• state — внутрішнє сховище даних (об'єктів) компонента.

• constructor (this.state) — встановлює початковий стан компонента.

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

• props — дані, що передаються від батьківського до дочірнього компонента.

• propTypes — дозволяє вам контролювати існування, або типи окремих props, що передаються до дочірніх компонентів.

• defaultProps — дозволяє вам задавати компоненту props за замовчуванням.

Життєвий цикл компонента:

• componentDidMount — виконується після встановлення (mount) компонента.
• componentWillUnmount — виконується перед тим, як компонент буде знищено.
• getDerivedStateFromProps — виконується, коли компонент встановлюється або props змінюються. Використовується для оновлення стану компонента, коли props змінюються.

Події:

• onClick
• onSubmit
• onChange

Ми пройшли досить багато матеріалу. Тепер ви зможете пояснити як всі ці компоненти складаються в екосистему React.

Додавання стану до вашого компонента

Наступний у списку — state. Перед цим ми говорили про складнощі керування інтерфейсом користувача, тому що, зазвичай вони мають безліч різноманітних станів. React почувається у цій області так впевнено, як ніхто інший. Кожен компонент має властивість керувати власними станами і, за потреби, передавати їх до дочірніх компонентів.

Повертаючись до прикладу з інтерфейсом Twitter, який було приведено на початку статті, компонент UserInfo (виділений рожевим) відповідає за керування станом (або даними) інформації про користувача. Якщо з'явиться необхідність передати його стан або дані іншому компоненту, але він не буде дочірнім компонентом UserInfo, тоді вам необхідно буде створити інший компонент, що буде прямим батьківським компонентом для UserInfo і компонента, що потребує стан. Так ви зможете передати стан через props до дочірніх компонентів. Іншими словами, якщо ви маєте декілька компонентів у ієрархії, то батьківський компонент зможе керувати станами і передавати їх до дочірніх компонентів через props.

Погляньте на приклад:

class HelloUser extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      username: 'codeguida'
    }
  }
  render() {
    return (
      <div>
        Hello {this.state.username}
      </div>
    )
  }
}

У цьому прикладі ми додали новий синтаксис. Напевно, ви вже помітили — це метод constructor. З раніше приведеного визначення стає зрозуміло, що цей метод — «спосіб встановлення стану компонента». Іншими словами, будь-які дані, які ви розміщуєте у this.state всередині конструктора, будуть частиною стану цього компонента. У приведеному вище прикладі ми вказуємо нашому компоненту, що хочемо відстежувати username. Це ім'я користувача тепер можна використовувати всередині нашого компонента, викликаючи {this.state.username}, що ми і робимо у методі render.

Останнє, що необхідно пам'ятати про state, це те, що компоненту необхідно мати можливість модифікувати його власний внутрішній стан. Ми робимо це викликаючи метод setState. Раніше ми вже поговорили про повторний рендеринг віртуального DOM при зміні даних у стані компонента.

Інформування нашому застосунку про те, що деякі дані змінилися → повторний рендеринг virtual DOM → попередня версія virtual DOM порівнюється з новим virtual DOM → реальний DOM отримує тільки необхідні зміни.

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

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

Тож у наступному прикладі, ми маємо поле вводу input, яке під час вводу автоматично оновлює стан компонента і змінює ім'я користувача.

class HelloUser extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      username: 'codeguida'
    }

    this.handleChange = this.handleChange.bind(this)
  }
  handleChange (e) {
    this.setState({
      username: e.target.value
    })
  }
  render() {
    return (
      <div>
        Hello {this.state.username} <br />
        Change Name:
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}

Зверніть увагу, ми ввели декілька нових понять. Перш за все, це метод handleChange. Він викликається кожного разу при введені тексту до поля вводу. Коли handleChange спрацьовує, він викликає setState, щоб перевизначити username незалежно від вхідних даних (e.target.value). Пам'ятайте, при виклику setState, React створює оновлений віртуальний DOM, порівнює його з наявним, а потім оновлює реальний DOM.

Поглянемо на метод render. Ми додали нове поле вводу, тип якого, очевидно, — text. Значення передається у змінну username, що була першопочатково визначена у методі getInitialState, і буде оновлена у handleChange. Тепер з'явився новий атрибут onChange. Він викликається при зміні значення в полі вводу. У цьому випадку метод, що ми визначили, — handleChange.

Алгоритм роботи коду з прикладу вище виглядає приблизно так:

Користувач друкує текст у полі вводу → викликається handleChange → змінюється state компонента → React перебудовує віртуальний DOM → React порівнює відмінності → оновлюється реальний DOM.

Після того, як ми поговоримо про props, у нас з'явиться нагода розглянути приклади використання обробки станів компонента.

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

Ось вам підказка по вивченню React: не читайте цей розділ пасивно, бо це надасть вам помилкове відчуття безпеки й завершеності. Ви гадатимете, що дійсно розумієте, що відбувається, і що ви зможете відтворити це згодом. Проте це не так. Перейдіть до CodeSandbox і спробуйте відновити (або створити власні) компоненти, не дивлячись на приклади приведені вище. Це єдиний спосіб вивчення чого завгодно.

Поглянемо де ми знаходимось тепер:

• JSX — дозволяє нам використовувати HTML-подібний синтаксис, що буде трансформовано у легкі JavaScript об'єкти.

• Virtual DOM — JavaScript репрезентація наявного DOM дерева.

• React.Component — спосіб створення нового компонента.

• render (метод) — визначення UI окремого компонента.

• ReactDOM.render — рендеринг React компонента у DOM.

• state — внутрішнє сховище даних (об'єктів) компонента.

• constructor (this.state) — встановлює початковий стан компонента.

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

• props — дані, що передаються від батьківського до дочірнього компонента.

• propTypes — дозволяє вам контролювати існування, або типи окремих props, що передаються до дочірніх компонентів.

• defaultProps — дозволяє вам задавати компоненту props за замовчуванням.

Життєвий цикл компонента:

• componentDidMount — виконується після встановлення (mount) компонента.
• componentWillUnmount — виконується перед тим, як компонент буде знищено.
• getDerivedStateFromProps — виконується, коли компонент встановлюється або props змінюються. Використовується для оновлення стану компонента, коли props змінюються.

Події:

• onClick
• onSubmit
• onChange

Отримання стану від батьківського компонента (props, propTypes, getDefaultProps)

Ми вже неодноразово згадували props, адже досить важко уявити без них що-небудь написане за допомогою React. За нашим визначенням вище, props передаються від батьківського до дочірнього компонента. Це дозволяє архітектурі React залишатись прозорою і зрозумілою. У такому випадку, обробка станів відбуватиметься у найвищому батьківському компоненті. Він використовує ці дані, і якщо, у вас є дочірній компонент, який потребує їх, то ви можете передати ці самі дані через props. Тобто від батьківського компонента до дочірнього.

Як приклад, базовий спосіб використання props:

class HelloUser extends React.Component {
  render() {
    return (
      <div> Hello, {this.props.name}</div>
    )
  }
}

ReactDOM.render(<HelloUser name="Codeguida"/>, document.getElementById('root'));

Зверніть увагу, що у дев'ятому рядку присутній атрибут name, що містить ім'я «Codeguida». Тепер наш компонент може використовувати {this.props.name}, і натомість отримає значення «Codeguida».

Розгляньмо більш просунутий приклад. Ми використаємо два компоненти, одного нащадка і один батьківський компонент. Батьківський компонент буде відстежувати стан і передавати частину цього стану своєму нащадку через props. Погляньте на батьківський компонент.

class FriendsContainer extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'Codeguida',
      friends: ['Guido van Rossum', 'Brendan Eich', 'Timothy John Berners-Lee']
    }
  }
  render() {
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <ShowList names={this.state.friends} />
      </div>
    )
  }
}

Навряд ви знайдете багато нового, проте я певен, що ви звернули увагу на передачу частини першопочаткового стану іншому компоненту. Більша частина нового коду буде отримана з цього дочірнього компонента, тому нам слід розглянути його детальніше:

class ShowList extends React.Component {
  render() {
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {this.props.names.map((friend) => <li>{friend}</li>)}
        </ul>
      </div>
    )
  }
}

Пам'ятайте, що код, який повертається методом render, є репрезентацією вигляду реального DOM. Якщо ви ще не знайомі з Array.prototype.map, то він може здатись вам дещо незграбним. Все, що робить map, — створює новий масив та викликає колбек функції для кожного з елементів масиву, а також заповнює новий масив результатами виклику колбеку. Для прикладу:

const friends = ['Guido van Rossum', 'Brendan Eich', 'Timothy John Berners-Lee'];
const listItems = friends.map((friend) => {
  return "<li> " + friend + "</li>";
});

console.log(listItems);
// ["<li> Guido van Rossum</li>", "<li> Brendan Eich</li>", "<li> Timothy John Berners-Lee</li>"];

console.log з прикладу вище повертає ["<li> Guido van Rossum</li>", "<li> Brendan Eich</li>", "<li> Timothy John Berners-Lee</li>"].

Зверніть увагу на результат. Було створено новий масив і додано <li></li> до кожного елемента вхідного масива.

Найліпше у map те, що він чудово працює з React, і одночасно з цим є нативним функціоналом JS. Отже, у нашому дочірньому компоненті ми огорнули імена у пару тегів <li></li>, і зберігаємо результат у змінній listItems. Після цього наш метод render повертає несортований список значень.

Перед тим, як закінчити тему props, пропоную розглянути ще один приклад. Важливо розуміти, що попри розташування даних, є визначене місце для їх керування. Такий підхід спрощує маніпуляції з даними й дозволяє зберігати простоту архітектури. Всі методи getter/setter для окремої частини даних завжди буде знаходитись у тому ж самому компоненті, де були визначені ці дані. Якщо вам необхідно маніпулювати будь-якою частиною цих даних поза межами їх рідного компонента, ви маєте передавати методи getter/setter у цей самий компонент у якості props.

Розглянемо приклад:

class FriendsContainer extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'Codeguida',
      friends: [
        'Guido van Rossum',
        'Brendan Eich',
        'Timothy John Berners-Lee'
      ],
    }

    this.addFriend = this.addFriend.bind(this)
  }
  addFriend(friend) {
    this.setState((state) => ({
      friends: state.friends.concat([friend])
    }))
  }
  render() {
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
}

Зауважте, що у методі addFriend було викликано setState у незвичний спосіб. Замість передачі об'єкта, ми передаємо функцію, що передається у state. Під час встановлення нового стану компонента на основі попереднього стану (як ще було зроблено з нашим масивом друзів), ви хочете передати до setState функцію, яка приймає поточний стан і повертає дані для злиття з новим state.

class AddFriend extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      newFriend: ''
    }

    this.updateNewFriend = this.updateNewFriend.bind(this)
    this.handleAddNew = this.handleAddNew.bind(this)
  }
  updateNewFriend(e) {
    this.setState({
      newFriend: e.target.value
    })
  }
  handleAddNew() {
    this.props.addNew(this.state.newFriend)
    this.setState({
      newFriend: ''
    })
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.newFriend}
          onChange={this.updateNewFriend}
        />
        <button onClick={this.handleAddNew}> Add Friend </button>
      </div>
    )
  }
}

class ShowList extends React.Component {
  render() {
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {this.props.names.map((friend) => {
            return <li> {friend} </li>
          })}
        </ul>
      </div>
    )
  }
}

Ви помітите, що код вище подібний до попереднього прикладу, відмінність полягає у тому, що тепер ми маємо змогу додавати імена до нашого списку друзів. Зауважте як я створив новий компонент AddFriend. Він керує доданням нового друга до списку. Причина ховається у тому, що батьківський компонент (FriendContainer) не переймається долею нового елемента масиву, того, який ви додали, він піклується лише про всіх друзів у списку (масив загалом). Однак, оскільки ми дотримуємось правил маніпуляції нашими даними з компонента, який містить дані, ми передамо метод addFriend, у компонент AddFriend через props і ми викличемо його після виклику метода handleAddNew.

На цьому етапі я рекомендую спробувати відтворити подібний функціонал самостійно. Можете використовувати його як підказку, у випадку, якщо ви застрягли більш ніж на 3-4 хвилини.

Перш ніж відійти від props, я хочу поговорити про ще дві особливості React, повязані з props. Це propTypes і defaultProps. Я не буду розповідати занадто докладно, тому що обидва вони досить прості для розуміння.

• prop-types дозволяють вам контролювати типи props та їх наявність у дочірньому компоненті. propTypes дозволяє визначити, що певні props мають буди визначених типів.

Починаючи з React 15, PropTypes більше не входить до пакета React. Тож вам потрібно буде інсталювати його окремо, через npm.

• defaultProps дозволяють визначати значення за замовчуванням для окремих props, у випадку, якщо ці властивості не було передано до компонента.

Я модифікував наші компоненти з використанням propTypes, тепер він вимагає, щоб addFriend був функцією і щоб вона була передана компоненту AddFriend. Також я використав defaultProps, тож якщо компонент ShowList не буде передано масиву friends, то за замовчуванням, він буде порожнім.

import React from 'react'
import PropTypes from 'prop-types'

class AddFriend extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      newFriend: ''
    }
  }
  updateNewFriend(e) {
    this.setState({
      newFriend: e.target.value
    })
  }
  handleAddNew() {
    this.props.addNew(this.state.newFriend)
    this.setState({
      newFriend: ''
    })
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
        <button onClick={this.handleAddNew}> Add Friend </button>
      </div>
    )
  }
}

AddFriend.propTypes: {
  addNew: PropTypes.func.isRequired
}

class ShowList extends React.Component {
  render() {
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {this.props.names.map((friend) => {
            return <li> {friend} </li>
          })}
        </ul>
      </div>
    )
  }
}

ShowList.defaultProps = {
  names: []
}

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

• JSX — дозволяє нам використовувати HTML-подібний синтаксис, що буде трансформовано у легкі JavaScript об'єкти.

• Virtual DOM — JavaScript репрезентація наявного DOM дерева.

• React.Component — спосіб створення нового компонента.

• render (метод) — визначення UI окремого компонента.

• ReactDOM.render — рендеринг React компонента у DOM.

• state — внутрішнє сховище даних (об'єктів) компонента.

• constructor (this.state) — встановлює початковий стан компонента.

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

• props — дані, що передаються від батьківського до дочірнього компонента.

• propTypes — дозволяє вам контролювати існування, або типи окремих props, що передаються до дочірніх компонентів.

• defaultProps — дозволяє вам задавати компоненту props за замовчуванням.

Життєвий цикл компонента:

• componentDidMount — виконується після встановлення (mount) компонента.
• componentWillUnmount — виконується перед тим, як компонент буде знищено.
• getDerivedStateFromProps — виконується, коли компонент встановлюється або props змінюються. Використовується для оновлення стану компонента, коли props змінюються.

Івенти:

• onClick
• onSubmit
• onChange

Кінець вже близько!

Життєвий цикл компонента

Кожен компонент, який ви створюєте, буде мати власні життєві події, які можуть стати у пригоді за певних обставин. Наприклад, якщо ми хочемо зробити ajax запит на першопочатковий рендеринг і отримати деякі дані, то де ми маємо його викликати? Або, якщо б ми забажали використовувати будь-яку логіку, у той час як наші реквізити змінились, як це зробимо? Різноманітні події життєвого циклу — відповіді на обидва цих питання. Розгляньмо їх.

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'Tyler McGinnis'
    }
  }
  componentDidMount(){
    // Запускається після того, як компонент під'єднаний (mounted) до DOM
    // Добре для створення AJAX запитів
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // Об'єкт, який ви повернете з цієї функції, буде об'єднано з поточним станом.
  }
  componentWillUnmount(){
    // Викликається НЕГАЙНО перед тим, як компонент від'єднується
    // Добре для очищення слухачів (listeners)
  }
  render() {
    return (
      <div>
        Hello, {this.state.name}
      </div>
    )
  }
}

componentDidMount — викликається одноразово, після первинного рендеринга. Оскільки компонент вже викликається при виклику цього методу, у вас є доступ до віртуальної DOM, ви можете викликати його через this.getDOMNode(). Таким чином ця подія життєвого циклу, в якій ви робитимете запити AJAX для здобуття певних даних.

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

getDerivedStateFromProps — інколи вам потрібно відновити стан вашого компонента на основі отриманих props. Цей метод життєвого циклу допоможе вам це зробити. Ви можете передати props і state, а об'єкт, що повертається, буде об'єднано з поточним станом.