React є точкою входу у бібліотеку React. Якщо ви завантажуєте React з тега <script>, API верхнього рівня доступні в глобальному об’єкті React. Якщо ви використовуєте ES6 разом із npm, ви можете написати import React from 'react', якщо ES5 — var React = require('react').
React-компоненти дозволяють розділити інтерфейс користувача на незалежні частини, які можна використовувати повторно та працювати з кожною окремо. Компоненти у React можуть бути визначені за допомогою підкласу React.Component або React.PureComponent.
Якщо ви не використовуєте ES6 класи, замість них ви можете використовувати модуль create-react-class. Для додаткової інформації, читайте Використання React без ES6.
React-компоненти також можуть бути визначені як функції, що обгорнуті у:
\nReact.memoМи рекомендуємо використання JSX для опису того, як повинен виглядати ваш інтерфейс користувача. Кожен JSX-елемент — це просто синтаксичний цукор для виклику React.createElement(). Вам не доведеться використовувати наступні методи безпосередньо, якщо ви використовуєте JSX.
Для додаткової інформації, дивіться Використання React без JSX.
\nReact надає декілька API для маніпулювання елементами:
React також надає компонент для рендерингу множини елементів без обгортки.
React.FragmentЗатримка дозволяє компонентам “почекати” чого-небудь перед рендерингом. На даний час існує тільки один спосіб використання затримки: динамічне завантаження компонентів із React.lazy. В майбутньому варіантів застосування затримки стане більше, наприклад, вибірка даних.
React.lazyReact.SuspenseХуки є новим доповненням у React 16.8. Вони дозволяють вам використовувати стан та інші React особливості без написання класу. Хукам присвячено секцію в документації та окремий API довідник:
\nuseStateuseEffectuseContextReact.Component React.Component є базовим класом для React-компонентів, коли вони визначені за допомогою ES6 класів:
class Greeting extends React.Component {\n render() {\n return <h1>Привіт, {this.props.name}</h1>;\n }\n}Дивіться довідник React.Component API для пошуку методів та властивостей, що пов’язані із базовим класом React.Component.
React.PureComponent React.PureComponent подібний до React.Component. Різниця між ними тільки в тому, що React.Component не реалізує shouldComponentUpdate(), а React.PureComponent реалізує його через поверхове порівняння пропсів та стану.
Якщо метод render() компонента React відображає той самий результат з тими самими пропсами та станом, ви можете використовувати React.PureComponent для підвищення продуктивності у деяких випадках.
\n\nПримітка
\nМетод
\nshouldComponentUpdate()класуReact.PureComponentтільки поверхово порівнює об’єкти. Якщо вони містять складні структури даних, це може призвести до помилкових спрацьовувань під час більш глибокого порівняння. РозширюйтеPureComponentтільки тоді, коли ви очікуєте на прості пропси та стан, або використовуйтеforceUpdate(), коли ви знаєте, що структури даних змінилися. Або розгляньте можливісь застосування незмінних об’єктів для спрощення швидкого порівняння вкладених даних.Крім того, метод
\nshouldComponentUpdate()класуReact.PureComponentпропускає оновлення пропсів для всього піддерева компоненту. Впевніться, що всі дочірні компоненти також “чисті”.
React.memo const MyComponent = React.memo(function MyComponent(props) {\n /* рендер з використанням пропсів */\n});React.memo є компонентом вищого порядку.
Якщо ваш компонент відображає той самий результат з тими самими пропсами та станом, ви можете обгорнути його у виклик React.memo для підвищення продуктивності в деяких випадках шляхом запам’ятовування результату. Це означає, що React пропустить рендеринг компоненту та повторно використає останній результат рендерингу.
React.memo тільки перевіряє чи змінилися пропси. Якщо ваша функція, згорнута у React.memo, має useState або useContext хуки в своїй імплементації, вона все ще буду ререндеритися при зміні стана або контекста.
За замовчуванням він тільки поверхово порівнює складні об’єкти, що знаходяться в об’єкті пропсів. Якщо ви хочете контролювати процес порівняння, ви також можете надати користувальницьку функцію для порівняння помістивши її другим аргументом.
\nfunction MyComponent(props) {\n /* рендер з використанням пропсів */\n}\nfunction areEqual(prevProps, nextProps) {\n /*\n повертає true, якщо передавання nextProps для рендерингу\n поверне той самий результат, що і передавання prevProps,\n інакше повертає false\n */\n}\nexport default React.memo(MyComponent, areEqual);Цей метод існує тільки для оптимізації продуктивності. Не покладайтеся на нього, щоб “запобігти” рендерингу, бо це може призвести до помилок.
\n\n\nПримітка
\nНа відміну від методу
\nshouldComponentUpdate()для компонентів-класів, функціяareEqualповертаєtrue, якщо пропси рівні іfalse, якщо пропси не рівні. Це інверсіяshouldComponentUpdate.
createElement() React.createElement(\n type,\n [props],\n [...children]\n)Створює та повертає новий React-елемент вказаного типу. Аргумент типу може бути або рядком тегу (наприклад, 'div' або 'span'), або типом компоненту React (клас чи функція), або фрагментом React.
Код написаний за допомогою JSX буде конвертований у виклики React.createElement(). Зазвичай ви не викликаєте React.createElement() безпосередньо, коли використовуєте JSX. Для того, щоб дізнатися більше, читайте React без JSX.
cloneElement() React.cloneElement(\n element,\n [props],\n [...children]\n)Клонує та повертає новий елемент React, використовуючи element як зразок. Отриманий елемент буде містити пропси оригінального елемента з новими властивостями, об’єднаними поверхово. Нові потомки замінять існуючих. key і ref з оригінального елемента будуть збережені.
React.cloneElement() майже рівнозначний:
<element.type {...element.props} {...props}>{children}</element.type>Проте, він також зберігає посилання. Це означає, що якщо ви отримаєте потомка з атрибутом ref, ви не зможете випадково вкрасти його у свого предка. Ви отримаєте той самий ref, доданий до вашого нового елемента.
Цей API був впроваджений як заміна застарілого React.addons.cloneWithProps().
createFactory() React.createFactory(type)Повертає функцію, яка створює React-елементи вказаного типу. Подібно до React.createElement(), аргумент типу може бути або рядком тегу (наприклад, 'div' або 'span'), або типом компоненту React (клас чи функція), або фрагментом React.
Цей помічник вважається застарілим, тому ми рекомендуємо використовувати або JSX, або безпосередньо React.createElement().
Зазвичай ви не викликаєте React.createFactory() безпосередньо, коли використовуєте JSX. Для того, щоб дізнатися більше, дивіться React без JSX.
isValidElement() React.isValidElement(object)Перевіряє чи об’єкт є елементом React. Повертає true або false.
React.Children React.Children надає утиліти для роботи з непрозорою структурою даних this.props.children.
React.Children.map React.Children.map(children, function[(thisArg)])Викликає функцію для кожного дочірнього елемента, що міститься в children із this встановленим у thisArg. Якщо children є масивом, він буде пройдений та функція виконається для кожного його елемента. Якщо children дорівнює null або undefined, функція поверне null або undefined, а не масив.
\n\nПримітка
\nЯкщо
\nchildren— це компонентFragment, він буде розглядатися як один потомок і не буде пройдений.
React.Children.forEach React.Children.forEach(children, function[(thisArg)])Подібний до React.Children.map(), але не повертає масив.
React.Children.count React.Children.count(children)Повертає загальну кількість компонентів у children, що дорівнює кількості викликів функції зворотнього виклику, яка передана у map чи forEach.
React.Children.only React.Children.only(children)Перевіряє чи children має тільки один дочірній елемент (React-елемент) і повертає його. В іншому випадку цей метод спричиняє помилку.
\n\nПримітка:
\n\n
React.Children.only()не приймає значення, яке повертає методReact.Children.map(), бо воно є масивом, а не елементом React.
React.Children.toArray React.Children.toArray(children)Повертає непрозору структуру даних children як плоский масив з ключами, призначеними для кожного потомка. Це корисно, якщо ви хочете маніпулювати колекціями потомків у ваших рендер-методах, особливо якщо ви хочете змінити порядок або обрізати this.props.children, перш ніж передавати його далі.
\n\nПримітка:
\n\n
React.Children.toArray()змінює ключі для збереження семантики вкладених масивів під час вирівнювання списку потомків. Тобто,toArrayдодає префікс до кожного ключа у повернутому масиві, тому ключ кожного елемента охоплює вхідний масив, що його містить.
React.Fragment Компонент React.Fragment доволяє вам повертати множину елементів у методі render() без створення додаткового DOM елемента:
render() {\n return (\n <React.Fragment>\n Some text.\n <h2>A heading</h2>\n </React.Fragment>\n );\n}Крім того, ви можете використовувати скорочений синтаксис <></>. Для отримання додаткової інформації, дивіться React v16.2.0: Покращена підтримка для фрагментів.
React.createRef React.createRef створює посилання, яке може бути додане до елемента React через ref атрибут.\n
class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n\n this.inputRef = React.createRef(); }\n\n render() {\n return <input type=\"text\" ref={this.inputRef} />; }\n\n componentDidMount() {\n this.inputRef.current.focus(); }\n}React.forwardRef React.forwardRef створює React-компонент, що передає атрибут ref, який він отримав, іншому компоненту, розташованому нижче у дереві. Цей прийом не дуже поширений, але він особливо корисний у двох випадках:
React.forwardRef приймає рендер-функцію як аргумент. React викличе цю функцію з двома аргументами props і ref. Ця функція повинна повертати вузол React.
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className=\"FancyButton\"> {props.children}\n </button>\n));\n\n// You can now get a ref directly to the DOM button:\nconst ref = React.createRef();\n<FancyButton ref={ref}>Click me!</FancyButton>;У прикладі вище, React передає посилання ref, передане елементу <FancyButton ref={ref}>, у рендер-функцію всередині виклику React.forwardRef в якості другого аргументу. Потім ця функція передає посилання ref у елемент <button ref={ref}>.
В результаті, коли React додасть посилання, ref.current буде посилатися беспосередньо на DOM елемент <button>.
Для отримання додаткової інформації, дивіться розділ про передавання посилань.
\nReact.lazy React.lazy() дає вам змогу визначити компонент, що динамічно завантажується. Це допомагає зменшити розмір бандлу шляхом затримки рендерингу компонентів, які не використовуються під час початкового рендерингу.
Більш детальіше ви можете дізнатися у розділі документації про розділення коду, а також прочитавши дану статтю.
\n// Цей компонент завантажується динамічно\nconst SomeComponent = React.lazy(() => import('./SomeComponent'));Зверніть увагу, що рендеринг lazy компонентів потребує наявності компонента <React.Suspense>, розташованого вище у дереві рендерингу. Таким чином ви можете вказати індикатор завантаження.
\n\nПримітка
\nВикористання
\nReact.lazyз динамічним імпортом вимагає підтримки промісів від вашого JS оточення. Для IE11 та нижче, потрібно використовувати polyfill.
React.Suspense React.Suspense дозволяє вам вказати індикатор завантаження у випадку, якщо деякі компоненти у дереві нижче ще не готові до рендерингу. Сьогодні, ледаче завантаження компонентів — це єдиний варіант використання, що підтримується <React.Suspense>:
// Цей компонент завантажується динамічно\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n return (\n // Відображає <Spinner> поки OtherComponent завантажується\n <React.Suspense fallback={<Spinner />}>\n <div>\n <OtherComponent />\n </div>\n </React.Suspense>\n );\n}Це задокументовано у розділі про розділення коду. Зауважте, що lazy компоненти можуть бути розташовані глибоко всередині дерева Suspense — йому не обов’язково обгортати кожнен з них. Найкраще розміщувати <Suspense> там, де ви хочете бачити індикатор завантаження, але lazy() використовувати всюди, де ви хочете розділити код.
Хоча це і не підтримується на даний час, в майбутньому ми плануємо дати можливість Suspense обробляти більше сценаріїв, наприклад, вибірку даних. Ви можете прочитати про це у нашому плані дій.
\n","frontmatter":{"title":"React API верхнього рівня","next":null,"prev":null},"fields":{"path":"content/docs/reference-react.md","slug":"docs/react-api.html"}}},"pageContext":{"slug":"docs/react-api.html"}},"staticQueryHashes":[]}Примітка:
\n\n
ReactDOMServerне підтримуєReact.lazy()та<React.Suspense>. Це відоме обмеження буде вирішено в майбутньому.