React Context API.en.uk

Август 10, 2022

Главная
Разное
React Context API.en.uk

Содержание

2. ВСТУП React Context API — це спосіб для програми React ефективно створювати глобальні змінні, які можна
3. React.createContext()це все, що вам потрібно. Він повертає споживача та постачальника.Провайдерє компонентом що, як випливає з назви,
4. Ну, не зовсім. Redux чудовий і ідеально відповідає потребам управління станом. Насправді, він настільки добре задовольнив
5. CONTEXT API ЗАМІНИТЬ REDUX? Простота Під час використання Redux люди, як правило, керують майже всім своїм
6. Як використовувати контекст 02 Використання контексту в React вимагає 3 простих кроків: створення контексту, надання контексту
7. Створення контексту Вбудована заводська функціяcreateContext (за замовчуванням)створює екземпляр контексту: імпорт{createContext}від "реагувати"; конст Контекст=createContext('Значення за замовчуванням'); Фабрична
8. Надання контексту Компонент Context.Provider, доступний у екземплярі контексту, використовується для надання контексту його дочірнім компонентам, незалежно
9. Споживання контексту Споживання контексту можна виконати двома способами. Перший спосіб полягає у використанні хука useContext(Context) React:
10. Споживання контексту Другий спосіб полягає у використанні функції рендерингу, наданої як дочірній компонент спеціального компонента Context.Consumer,
11. НАТИСНІТЬ НАТИСНІТЬ shorturl.at/CFQVZ
12. Реагувати на контекст
13. Ми можемо мати скільки завгодно споживачів для одного контексту. Якщо значення контексту змінюється (шляхом зміни параметра
14. Висновки API контексту Винахідливий і ідеальний для невеликих програм, де зміни стану мінімальні Redux Ідеально підходить
16. Скачать презентацию

Слайд 2

ВСТУП
React Context API — це спосіб для програми React ефективно створювати

глобальні змінні, які можна передавати. Це альтернатива «бурінню реквізитів» або переміщенню реквізитів від дідуся до дитини до батька тощо. Контекст також рекламується як простіший і легший підхід до управління станом за допомогою Redux.

ВСТУП

Слайд 3

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

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

ЯК ЦЕ ПРАЦЮЄ?

Слайд 4

Ну, не зовсім.
Redux чудовий і ідеально відповідає потребам управління станом. Насправді,

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

CONTEXT API ЗАМІНИТЬ REDUX?

Слайд 5

CONTEXT API ЗАМІНИТЬ REDUX?
Простота
Під час використання Redux люди, як правило, керують

майже всім своїм станом у Redux, і це викликає 2 проблеми:
Накладні витрати. Навіщо мені створювати/оновлювати 3 файли лише для того, щоб додати одну маленьку функцію?
Однією з значних переваг одностороннього зв’язування даних React є те, що його легко зрозуміти – компонент передає стан своїм нащадкам. Використання Redux позбавляє нас цього.

Використовуючи Context API, ми можемо визначити кілька непов’язаних контекстів (сховищ) і використовувати кожен у відповідному місці програми.

Однак Redux має свої недоліки, і тому важливо знати, що Context API дає нам, а Redux — ні:

Слайд 6

Як використовувати контекст
02
Використання контексту в React вимагає 3 простих кроків: створення

контексту, надання контексту та використання контексту.

Як використовувати контекст

Слайд 7

Створення контексту
Вбудована заводська функціяcreateContext (за замовчуванням)створює екземпляр контексту:
імпорт{createContext}від "реагувати";
конст Контекст=createContext('Значення за

замовчуванням');
Фабрична функція приймає один необов’язковий аргумент: значення за замовчуванням.

Слайд 8

Надання контексту
Компонент Context.Provider, доступний у екземплярі контексту, використовується для надання контексту

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

функція Головна() {
конст значення="ЗНАЧЕННЯ КОНТЕКСТУ";
повернення(

);
}

Слайд 9

Споживання контексту
Споживання контексту можна виконати двома способами.
Перший спосіб полягає у використанні

хука useContext(Context) React:
Хук повертає значення контексту: value = useContext(Context). Хук також забезпечує повторну візуалізацію компонента, коли значення контексту змінюється.

імпорт{useContext}від "реагувати";
функція MyComponent() {
конст значення=useContext(Контекст);
повернення {значення};
}

Слайд 10

Споживання контексту
Другий спосіб полягає у використанні функції рендерингу, наданої як дочірній

компонент спеціального компонента Context.Consumer, доступного в екземплярі контексту:
функція MyComponent() {
повернення(
<Контекст. Споживач>
{значення => {значення}}

);
}

Слайд 11

НАТИСНІТЬ
НАТИСНІТЬ
shorturl.at/CFQVZ

Слайд 12

Реагувати на контекст

Слайд 13

Ми можемо мати скільки завгодно споживачів для одного контексту. Якщо значення

контексту змінюється (шляхом зміни параметра значення постачальника), то всі споживачі негайно отримують сповіщення та повторно відображаються.
Якщо споживач не загорнутий у постачальник, але все одно намагається отримати доступ до значення контексту (за допомогоюuseContext(Контекст)або), тоді значення контексту буде аргументом значення за умовчанням, який надаєтьсяcreateContext(defaultValue)функція фабрики, яка створила контекст.

Слайд 14

Висновки
API контексту
Винахідливий і ідеальний для невеликих програм, де зміни стану мінімальні
Redux
Ідеально

підходить для великих програм, де є високочастотні оновлення стану

React Context API.en.uk

Содержание

ВСТУПReact Context API — це спосіб для програми React ефективно створювати

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

Ну, не зовсім.Redux чудовий і ідеально відповідає потребам управління станом. Насправді,

CONTEXT API ЗАМІНИТЬ REDUX?ПростотаПід час використання Redux люди, як правило, керують

Як використовувати контекст02Використання контексту в React вимагає 3 простих кроків: створення

Надання контекстуКомпонент Context.Provider, доступний у екземплярі контексту, використовується для надання контексту

Споживання контекстуСпоживання контексту можна виконати двома способами.Перший спосіб полягає у використанні

Споживання контекстуДругий спосіб полягає у використанні функції рендерингу, наданої як дочірній

НАТИСНІТЬНАТИСНІТЬshorturl.at/CFQVZ