На цій сторінці представлено поняття стану та життєвого циклу у React-компоненті. Ви можете знайти детальний API-довідник по компонентах тут.
\nРозглянемо приклад відліку годинника з одного з попередніх розділів. У Рендерингу елементів ми дізналися лише один спосіб оновлення UI. Ми викликаємо ReactDOM.render(), щоб змінити відрендерний вивід інформації:
function tick() {\n const element = (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {new Date().toLocaleTimeString()}.</h2>\n </div>\n );\n ReactDOM.render( element, document.getElementById('root') );}\n\nsetInterval(tick, 1000);У цьому розділі ми дізнаємося, як зробити компонент ‘Clock’ дійсно багаторазовим та інкапсульованим. Компонент сам налаштує свій таймер та оновлюватиметься кожну секунду.
\nМи можемо почати з того, як виглядає годинник:
\nfunction Clock(props) {\n return (\n <div> <h1>Привіт, світе!</h1> <h2>Зараз {props.date.toLocaleTimeString()}.</h2> </div> );\n}\n\nfunction tick() {\n ReactDOM.render(\n <Clock date={new Date()} />, document.getElementById('root')\n );\n}\n\nsetInterval(tick, 1000);Однак, ми порушуємо важливу вимогу: той факт, що Clock встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації Clock.
В ідеалі ми хочемо написати це один раз аби Clock оновлював себе сам:
ReactDOM.render(\n <Clock />, document.getElementById('root')\n);Аби це реалізувати, нам потрібно додати “стан”(“state”) до компонента Clock.
Стан подібний до пропсів, але він приватний і повністю контролюється компонентом.
\nВи можете перетворити функцію компонента Clock на клас у п’ять кроків:
React.Component.render().render().props на this.props в тілі render().class Clock extends React.Component {\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.props.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}Clock тепер визначається як клас, а не як функція.
Метод render буде викликатися кожного разу, коли відбуватиметься оновлення. Але до тих пір, поки ми рендеремо <Clock /> в тому ж DOM-вузлі, буде використано лише один екземпляр класу Clock. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
Ми перемістимо date з пропсів до стану в три етапи:
this.props.date на this.state.date у методі render():class Clock extends React.Component {\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2> </div>\n );\n }\n}this.state початкове значення:class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()}; }\n\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}Зверніть увагу на те, як ми передаємо props(пропси) базовому конструктору:
constructor(props) {\n super(props); this.state = {date: new Date()};\n }Компоненти класу повинні завжди викликати базовий конструктор з props.
date з елемента <Clock />:ReactDOM.render(\n <Clock />, document.getElementById('root')\n);Пізніше ми додамо код таймера назад до самого компонента.
\nРезультат виглядає так:
\nclass Clock extends React.Component {\n constructor(props) { super(props); this.state = {date: new Date()}; }\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2> </div>\n );\n }\n}\n\nReactDOM.render(\n <Clock />, document.getElementById('root')\n);Далі ми зробимо так, аби Clock сам налаштував свій таймер і оновлював себе кожну секунду.
У додатках з багатьма компонентами, дуже важливо при знищенні компонентів звільняти ресурси, що використовуються.
\nМи хочемо налаштувати таймер кожного разу, коли Clock буде передано DOM вперше. У React це називається “монтування”.
Ми також хочемо очистити цей таймер, коли DOM, створений компонентом Clock, видаляється. У React це називається “демонтування”.
\nМи можемо оголосити спеціальні методи в класі компонента, які будуть викликані тоді, коли компонент монтується і демонтується:
\nclass Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n componentDidMount() { }\n componentWillUnmount() { }\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}Ці методи називаються “методами життєвого циклу”.
\nМетод componentDidMount() виконується після того, як вивід компонента був відрендерений у DOM. Це гарне місце для налаштування таймера:
componentDidMount() {\n this.timerID = setInterval( () => this.tick(), 1000 ); }Зверніть увагу на те, як ми зберігаємо ідентифікатор таймера прямо у this (this.timerID).
Хоча this.props налаштовує сам React, а this.state має особливе значення, ви можете додавати додаткові поля до класу вручну, якщо потрібно зберегти те, що не бере участь у потоці даних (як ідентифікатор таймера).
У методі життєвого циклу componentWillUnmount(), ми очистимо таймер:
componentWillUnmount() {\n clearInterval(this.timerID); }Нарешті, ми реалізуємо метод під назвою tick(), який компонент Clock буде запускати кожну секунду.
Він буде використовувати this.setState() для планування оновлення внутрішнього стану компонента:
class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n componentDidMount() {\n this.timerID = setInterval(\n () => this.tick(),\n 1000\n );\n }\n\n componentWillUnmount() {\n clearInterval(this.timerID);\n }\n\n tick() { this.setState({ date: new Date() }); }\n render() {\n return (\n <div>\n <h1>Привіт, світе!</h1>\n <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Clock />,\n document.getElementById('root')\n);Тепер годинник тікає кожну секунду.
\nДавайте швидко повторимо, що відбувається, і порядок, в якому ці методи викликаються:
\n<Clock /> передається до ReactDOM.render (), React викликає конструктор компонента Clock. Оскільки Clock має відображати поточний час, він ініціалізує this.state з об’єктом, що включає поточний час. Пізніше ми оновимо цей стан.Clock метод render() компонента. Ось як React дізнається, що саме має відображатися на екрані. Потім React оновлює DOM, щоб він відповідав виводу рендера Clock.Clock вставляється в DOM, React викликає метод життєвого циклу componentDidMount(). Всередині нього компонент Clock просить браузер налаштувати таймер для виклику методу компонента tick() один раз на секунду.tick(). У цьому методі компонент Clock планує оновлення UI, викликаючи setState() з об’єктом, що містить поточний час. Завдяки виклику setState() React знає, що стан змінився, і знову викликає метод render(), щоб дізнатися, що має бути на екрані. Цього разу this.state.date в методі render() буде відрізнятися і тому вивід рендера буде включати оновлений час. React оновлює DOM відповідно.Clock коли-небудь буде видалений з DOM, React викличе метод життєвого циклу componentWillUnmount(), аби таймер зупинився.Є три речі, які ви повинні знати про setState().
Наприклад, це не буде повторно рендерити компонент:
\n// Wrong\nthis.state.comment = 'Привіт';Натомість використовуйте setState():
// Correct\nthis.setState({comment: 'Привіт'});Конструктор — це єдине місце, де можна присвоїти this.state.
React може групувати кілька викликів setState() в одне оновлення для продуктивності.
Оскільки this.props і this.state можуть бути оновлені асинхронно, не варто покладатися на їх значення для обчислення наступного стану.
Наприклад, цей код може не оновити лічильник:
\n// Wrong\nthis.setState({\n counter: this.state.counter + this.props.increment,\n});Щоб виправити це, скористайтеся другою формою setState(), яка приймає функцію, а не об’єкт. Ця функція отримає попередній стан як перший аргумент і значення пропсів безпосередньо в момент оновлення як другий аргумент:
// Correct\nthis.setState((state, props) => ({\n counter: state.counter + props.increment\n}));Вище було використано стрілкову функцію, але це також працює із звичайними функціями:
\n// Correct\nthis.setState(function(state, props) {\n return {\n counter: state.counter + props.increment\n };\n});Коли ви викликаєте setState(), React об’єднує об’єкт, який ви надаєте, із поточним станом.
Наприклад, ваш стан може містити кілька незалежних змінних:
\n constructor(props) {\n super(props);\n this.state = {\n posts: [], comments: [] };\n }Тоді ви можете оновлювати їх окремо за допомогою викликів setState():
componentDidMount() {\n fetchPosts().then(response => {\n this.setState({\n posts: response.posts });\n });\n\n fetchComments().then(response => {\n this.setState({\n comments: response.comments });\n });\n }Злиття є поверхневим, а тому this.setState({comments}) залишає this.state.posts незмінним, але повністю замінює this.state.comments.
Ні батьківські, ні дочірні компоненти не можуть знати, чи є певний компонент становим або безстановим, і вони не повинні піклуватися, чи визначено його як функцію або клас.
\nСаме тому стан часто називають внутрішнім або інкапсульованим. Він не доступний для будь-якого іншого компоненту, окрім того, який ним володіє і встановлює.
\nКомпонент може передати свій стан вниз у якості пропсів до своїх дочірніх компонентів:
\n<FormattedDate date={this.state.date} />Компонент FormattedDate отримає date у своїх пропсах і не буде знати, чи він належить стану Clock, чи пропсам Clock, чи був введений вручну:
function FormattedDate(props) {\n return <h2>Зараз {props.date.toLocaleTimeString()}.</h2>;\n}Це зазвичай називається “зверху вниз” або “односпрямованим” потоком даних. Будь-який стан завжди належить певному компоненту і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти, що знаходяться “нижче” у дереві.
\nУявіть дерево компонентів як водоспад пропсів, де стан кожного компонента подібний до додаткового джерела води, який приєднується до нього в довільній точці, але тече вниз.
\nЩоб показати, що всі компоненти є дійсно ізольованими, ми можемо створити компонент App, який рендерить три <Clock>:
function App() {\n return (\n <div>\n <Clock /> <Clock /> <Clock /> </div>\n );\n}\n\nReactDOM.render(\n <App />,\n document.getElementById('root')\n);Кожен Clock встановлює свій власний таймер і оновлюється самостійно.
У додатках React, незалежно від того, чи є компонент зі станом або без нього, він вважається деталлю реалізації компонента, який може змінюватися з часом. Можна використовувати компоненти без стану всередині компонентів зі станом та навпаки.
","frontmatter":{"title":"Стан та життєвий цикл","next":"handling-events.html","prev":"components-and-props.html"},"fields":{"path":"content/docs/state-and-lifecycle.md","slug":"docs/state-and-lifecycle.html"}}},"pageContext":{"slug":"docs/state-and-lifecycle.html"}},"staticQueryHashes":[]}