Що таке React
Віртуальний DOM: React використовує віртуальний DOM, щоб покращити продуктивність. Замість оновлення всього дерева DOM при кожній зміні, React оновлює тільки ті частини, які змінилися. Це зменшує кількість операцій, пов’язаних з взаємодією з реальним DOM і забезпечує швидшу роботу додатків.
Компоненти: React працює за принципом компонентів. Кожен елемент інтерфейсу представляє собою компонент, який можна створити, настроїти і використовувати повторно.
Одностороння потік даних: Дані в React пересуваються в одному напрямку - від батьківських компонентів до дітей. Це спрощує управління станом додатку і дозволяє зберігати дані відокремлено від представлення.
JSX: React використовує JSX (JavaScript XML) для опису інтерфейсу. JSX дозволяє писати HTML-подібний код в JavaScript, що робить код більш зрозумілим і легким для розробки.
Що таке реактивність
Полягає в створенні програм, які реагують на зміни даних та автоматично оновлюють інтерфейс користувача без необхідності вручну керувати оновленнями. Ось ключові аспекти реактивності:
- Декларативність: Реактивні програми зазвичай використовують декларативний підхід для опису структури та логіки додатку. Замість імперативного коду, де ви описуєте, як досягти певного стану, ви вказуєте, як повинен виглядати бажаний стан, і система сама забезпечує його досягнення.
- Автоматичні оновлення: Реактивність дозволяє створювати залежності між даними та відображенням. Коли дані змінюються, відображення автоматично оновлюються, щоб відобразити актуальний стан. Немає потреби вручну керувати оновленнями.
- Двосторонні зв’язки: Реактивність дозволяє встановлювати двосторонні зв’язки між даними та відображенням. Якщо дані змінюються в додатку, вони автоматично оновлюються в інтерфейсі, і навпаки. Це полегшує взаємодію користувача з додатком.
- Спостережувані дані (Observable Data): Реактивність часто використовує концепцію спостережуваних даних, які можна спостерігати на зміни. Це дозволяє компонентам автоматично реагувати на зміни в цих даних.
- Реактивні бібліотеки і фреймворки: У Frontend розробці існують багато бібліотек і фреймворків, які спеціалізуються на реактивному програмуванні. Наприклад, бібліотека RxJS для роботи з потоками подій або фреймворки, такі як Vue.js та Angular, які надають реактивний підхід для розробки інтерфейсів.
- Асинхронність: Реактивність також допомагає керувати асинхронними операціями, такими як запити до сервера або обробка подій. Вона спрощує роботу з асинхронним кодом та дозволяє зручно взаємодіяти з асинхронними даними.
Чому реакт не зовсім реактивний
- Оновлення за запитом (Request-Driven Updates): У React оновлення відбуваються за запитом, а не автоматично. Ви повинні визначити, коли і яким чином виконувати оновлення, навіть якщо React автоматично порівнює віртуальний DOM. В інших реактивних фреймворках, таких як Vue.js, зміни даних спричиняють автоматичне оновлення відображення.
- Часткова реактивність: React визначає реактивність для кожного компонента, а не для всього додатку в цілому. Це дозволяє контролювати точно, які частини додатку повинні бути реактивними. У реактивних фреймворках ця реактивність може бути більш загальною.
- Імперативна логіка: В React ви можете використовувати імперативну логіку, коли це необхідно. Ви можете вручну керувати DOM-елементами за допомогою React, хоча це може не бути найкращою практикою.
- Фокус на Virtual DOM: React активно використовує Virtual DOM для ефективного оновлення фактичного DOM, але ця частина підходу не завжди відображається в термінах реактивності.
Що таке JSX і як він трансформується в html
SX (JavaScript XML) - це розширення JavaScript, яке дозволяє вбудовувати HTML-подібний код безпосередньо в JavaScript. При компіляції вашого React коду, JSX перетворюється на виклики JavaScript-функцій, які створюють віртуальний DOM (Document Object Model).
Ось приклад того, як JSX перетворюється на віртуальний DOM та, в кінцевому підсумку, на HTML:
- JSX код:
const element = <h1>Hello, World!</h1>; - Перетворення в віртуальний DOM (JSX вище перетворюється на віртуальний DOM, подібний до об’єкта):
const element = {
type: ‘h1’,
props: {
children: ‘Hello, World!’
}
};
- React використовує цей віртуальний DOM для оновлення фактичного DOM на стороні браузера. На цьому етапі віртуальний DOM вставляється у фактичний DOM, і ви бачите текст “Hello, World!” в вашому браузері:
Як працює Virtual DOM
- Початковий рендеринг:
Під час початкового рендерингу React створює віртуальний DOM - це віртуальне представлення поточного стану вашого додатку.
Віртуальний DOM - це дерево об’єктів JavaScript, яке відображає структуру вашого інтерфейсу та стан кожного компонента. - Зміни стану:
Коли стан React компонентів змінюється (наприклад, через взаємодію користувача або завантаження нових даних), React не оновлює фактичний DOM напряму.
Замість цього, React генерує новий віртуальний DOM зі зміненими даними та порівнює його з попереднім віртуальним DOM. - Реконсиліація віртуального DOM:
Порівнюючи попередній і новий віртуальний DOM, React визначає, які частини сторінки змінилися.
Цей процес порівняння відомий як реконсиліація (reconciliation).
4.Відмінності (diffing):
React визначає різниці між попереднім і новим віртуальним DOM, що допомагає знайти, які елементи і як саме змінилися.
- Створення пакету змін:
Після визначення різниць React створює пакет змін (reconciliation diff) - це набір інструкцій для оновлення реального DOM так, щоб він відображав зміни віртуального DOM. - Паралельна обробка та мінімізація операцій:
React використовує оптимізації, такі як паралельна обробка та мінімізація операцій (batching), щоб впоратися з оновленнями більш ефективно. - Оновлення фактичного DOM:
Нарешті, React оновлює фактичний DOM лише за допомогою змін, які були обчислені під час реконсиліації та створення пакету змін.
Це дозволяє уникнути зайвих операцій та мінімізувати затрати на оновлення DOM.
Завершення циклу рендерингу:
Цей процес відбувається при кожному оновленні стану компонентів та забезпечує реактивність та ефективність React додатку.
Які оптимізації рендеренгу застосовує react
- Паралельна обробка (Concurrent Mode):
В React 18 та більших версіях введений режим під назвою “Concurrent Mode”, який дозволяє React працювати в паралельному режимі. Це означає, що React може виконувати багато різних завдань одночасно, включаючи обробку оновлень компонентів, обробку подій користувача та інші операції, без блокування головного потоку браузера. - Мінімізація операцій:
React використовує віртуальний DOM для мінімізації операцій, які потрібно виконати для оновлення фактичного DOM. Після порівняння попереднього і нового віртуальних DOM, React визначає найменший набір операцій, необхідних для оновлення, і виконує лише ці операції. - Batching (пакетування операцій):
React також використовує підхід до пакетування операцій. Замість того, щоб безпосередньо оновлювати DOM після кожної окремої зміни, він групує багато операцій в одну і виконує їх одноразово. Це допомагає уникнути зайвих оновлень та зберігає відповідність інтерфейсу в незмінному стані до завершення пакету. - Операції пріоритетів:
Concurrent Mode в React дозволяє визначити пріоритети операцій. Наприклад, операції, пов’язані з користувачем (наприклад, кліки), можуть мати вищий пріоритет, ніж інші операції. Це дозволяє React реагувати на дії користувача миттєво, навіть якщо в процесі обробки були запущені інші задачі. - Suspense (відстрочка):
React також використовує “Suspense” для управління асинхронним завантаженням даних. Завдяки цій функції, ви можете зупиняти виконання компонента до завершення завантаження даних, забезпечуючи більш плавні взаємодії та зменшення
Як реакт відрізняє хук від функції
Реакт не “відрізняє” хук від функції на рівні розпізнавання самої функції. Замість цього, існують два ключові підходи, які використовуються для визначення та валідації хуків в реакт-компонентах:
Правила назви хуків: Кастомні хуки мають конвенційні назви, які починаються з “use”. Наприклад, useEffect, useState, useCustomHook, і так далі. Ця конвенція допомагає розпізнати, що функція призначена для використання як хук.
Лінтери та правила хуків (Hook Rules): Реакт використовує систему лінтингу (eslint rules), таку як eslint-plugin-react-hooks, для виявлення та валідації правильного використання хуків. Ці правила перевіряють, чи хуки викликаються на верхньому рівні компонента або іншого хука, і чи не викликаються вони всередині циклів, умов, або інших неприпустимих місць.
Ці дві практики в комбінації дозволяють реактові впізнати та валідувати хуки. Таким чином, коли ви створюєте функцію з ім’ям, яке починається з “use” і використовується відповідно до правил хуків, реакт припускає, що це може бути хуком, і застосовує до неї відповідні правила.
Як виконується монтування
Коли компонент вперше з’являється на екрані, ми називаємо це монтуванням. Це коли React створює екземпляр цього компонента вперше, ініціалізує його стан, запускає його хуки та додає елементи до DOM. Кінцевий результат — ми бачимо на екрані те, що відтворюємо в цьому компоненті.
Як виконується розмантування
Потім відбувається демонтування: це коли React виявляє, що компонент більше не потрібен. Таким чином, він виконує остаточне очищення, знищує екземпляр цього компонента та все, що з ним пов’язано, як-от стан компонента, і, нарешті, видаляє пов’язаний з ним елемент DOM.
Як виконується ре-рендер
І, нарешті, повторний рендеринг. Це коли React оновлює вже існуючий компонент новою інформацією. Порівняно з монтуванням повторне рендеринг є легким: React просто повторно використовує вже існуючий екземпляр, запускає хуки, виконує всі необхідні обчислення та оновлює існуючий елемент DOM новими атрибутами.
UseState
- Это асинхронная функция которая возвращает массив данных, и функцию которая меняет эти данные.
- Используем только в компонентах, либо в других хуках,
- Не используем useState:
- для статических данных;
- в циклах и условиях; - Передаем фиксированное значение, или если значение меняется от предыдущего предпочтительнее передавать функцию useState((actual) => actual + 1)). Этот нюанс связан с асинхронной логикой, так как при использовании setInterval или setTimeout может вернуть не корректное значение.
UseMemo
- Это функция которая принимает функцию колбэк (которая создает объект), или сам объект. Вторым параметром масив зависимостей при изминении которых, создаваемый объект в колбэке перерисуется.
const createContextValue = () => {
return {
initialCategories,
categories,
viewOptions,
currentCategory,
currentBrand,
setCurrentBrand,
isDashboardLoading,
};
};
const contextValue = useMemo(
() => createContextValue(),
[
dashboard,
initialCategories,
categories,
viewOptions,
currentCategory,
currentBrand,
isDashboardLoading,
]
);
return (
<MyContext.Provider value={contextValue}>
<Outlet></Outlet>
</MyContext.Provider>
);
}
useCollback
- Это функция которая принимает функцию колбэк . Вторым параметром масив зависимостей при изминении которых, пересоздается данная функция. (Если не меняются значения, то функция всегда возвращается одна и та же.)
- Данный хук хорошо работает в двух случаях:
2.1. Когда в useEffect-е в масиве зависимостей есть функция и чтобы данная функция не пересоздавалась создается useCallback.
2.2 В связке с функцией memo().
Когда есть функция которая добавляет todo (addTodo). И есть компонент в который мы передаем данные знаечния. То функцию addTodo мы обарачиваем в useCallback а компонент в который мы передаем функцию addTodo делаем как memo();
const addTodo = uaeCallback( (newTodo) => setTodos( (todos) => […todos, newTodo]), []);
<NewTodo addTodo={addTodo}/>
NewTodo
export const NewTodo = memo(({addTodo}) => { …. }
Lazy, Suspense
При загрузке АРР все файлы компилятся в один файл bundle.js. Чтобы облегчить данный файл и вынести часть логики в другой файл (сделать так чтобы например страница Abou Us - компилилась только в том случае когда мы перейдем на данную страницу ) нужно завернуть импорт в lazy() а созданый компонент в Suspense.
const Homepage = lazy( () => import(‘./routes/HomePage);
const About = lazy(() => import(‘./routes/About’));
<Router>
<Suspense fallback={<div>Завантаження...</div>}>
<Routes>
<Route path="/" element={<Homepage></Homepage>} />
<Route path="/about" element={<About></About>} />
</Routes>
</Suspense>
</Router>
useTransition\useDeferredValue
useTransition:
Когда у нас есть input и на каждом вводе символа производится запрос на сервер и происходит сортировка, поиск елемента. При слабом компютере когда посимвольно мы будем удалять слово в поиске (в input-е) символ будет удалятся а контент будет менятся с большой задержкой. Чтобы улучшить данный вариант мы можем использовать:
startTransition - принимает функцию в середине которой может быть сколько угодно сетСтейтов.
isPending - булевое значение которое может показывать спинер.
const [isPending, startTransition] = useTransition();
const handleSearch = (e) => {
startTransition( () => { setSearch(e.target.value)}
};
useDeferredValue:
Делает тоже самое только для всего prop:
function Comments({entites=[]}) {
const value = useDeferredValue(entities);
value.map(component = > {
….
….
)};
};
useEffect
Асинхронный хук.
FLOW:
1. Реакт вызывет компонент один раз который возвращает ему JSX. При єтом когда проходит useEfect мы его регистрируем и говорим что вызови его тогда когда измениться значение в масиве значений.
Чтобы скинуть значения интервалов, таймаутов, подписок, чтобы удалить компонент в DOM-e используем return.
UseContext
Делает все тоже, что и редакс, только со своим синтаксисом.
создаем контекст:
const CastomContext = createContext({});
создаем функцию которая оборачивает Context.Provider:
export function Context() {…..
value = {….}
return (
< CastomContext.Provider value={contextValue}>
{props.children}
</ CastomContext.Provider>
)
}
cоздаем кастомный хук чтобы постоянно не исползовать useContext:
export function useCastomContext() {
const context = useContext(CastomContext);
if (context === undefined) {
throw new Error(
‘useCastomContext must be used with in a
ContextProvider. Wrap a parent component in
<ContextProvider> to fix this error.' );
}
return context;
}</ContextProvider>
И потом в любом компоненте мы вызываем useCastomContext() и деструктуризируем нужные нам значения.
const { dashboard, initialCategories } = useCastomContext();
UseReducer
UseReducer - Функция которая принимает текущее состояние нашего приложения и принимает action в зависимости от которого предпологается что функция вернет новое состояние.
ВОЗВРАЩАЕТ значение и функцию обновление.
ПРИНИМАЕТ нужный редюсер, и значение по умолчанию (initial state).
const [{ r, g, b }, dispatch] = useReducer(reducer, { r: 0, g: 150, b: 200 });
dispatch - функция которая прнимает action, payload, meta
React гарантує, що функція dispatch зберігає ідентичність і не змінюється під час повторних рендерів.
const limitRGB = (num) => (num < 0 ? 0 : num > 255 ? 255 : num);
const step = 50;
const reducer = (state, action) => {
switch (action.type) {
case ‘INCREMENT_R’:
return {
…state,
r: limitRGB(state.r + step),
};
case ‘DECREMENT_R’:
return {
…state,
r: limitRGB(state.r - step),
};
……
default:
return state;
}
};
export default function AppReducer() {
const [{ r, g, b }, dispatch] = useReducer(reducer, { r: 0, g: 150, b: 200 });
return (
<>
<h1 style={{ color: rgb(${r}, ${g}, ${b}) }}>
Hello CodeSandbox
</h1>
<div>
<span>r</span>
<button onClick={() => dispatch({ type: ‘INCREMENT_R’ })}>
+
</button>
<button onClick={() => dispatch({ type: ‘DECREMENT_R’ })}>
-
</button>
</div>
<div>….. </div>
<div>….. </div>
</>
);
}
useRef
Используется в двух случаях.
1. Когда нам нужно найти елемент в DOM дереве.
Пример:
сonst inputEl = useRef(null);
<input placeholder=’name’ ref={inputEl}>
Раньше в JS мы могли получить данный елемент через querySelecor() то сейчас мы
помечаем данные елемент, тем самым избегаем длиного поиска по всему DOM
деревую.
2. Для хранения статических значений в поле current мы можем хранить любое статическое значение. При чем при изминении данного значения стейт не перерендіривается.
Служит для запоминания значение без перередеринга.
** Если нужно запустить код когда Реакт присоединяет или отсоединяет Ref к узлу DOM мы можем использовать callbackRef
Оптимізація через “debounce”, бібліотека lodash.debounce
Використання debounce в React додатку може бути корисним в багатьох сценаріях, де потрібно зменшити частоту викликів функцій для оптимізації продуктивності та реагування на користувацькі дії. Ось деякі приклади:
- Пошук в реальному часі: При введенні тексту в поле пошуку ви хочете відправити запит на сервер, але не за кожним символом, а наприклад, через 500 мс після останнього введеного символу.
- Автозбереження форм: У формі редагування тексту або налаштувань ви хочете автозберегти зміни, але збереження не повинно відбуватися при кожній зміні поля, а лише після закінчення редагування.
- Автодоповнення: Під час введення тексту в поле автодоповнення ви хочете відправити запит на отримання рекомендацій, але не за кожним символом.
- Затримка оновлень сторінки: Під час розширеного використання інтерфейсу зі значними змінами (наприклад, сортування таблиці), можна використовувати debounce для затримки оновлення сторінки до тих пір, поки користувач не завершить дію.
- Валідація форм: Для валідації форми можна використовувати debounce, щоб відправляти запит на валідацію лише після закінчення редагування форми, замість того, щоб перевіряти кожну зміну.
- Використання фільтрів або сортування в списку даних: При використанні фільтрів або сортування великих списків даних debounce допоможе затримати оновлення списку до тих пір, поки користувач не завершить вибір параметрів фільтрації або сортування.
Різниця між “setTimeout” та “Debounce”
setTimeout:
- setTimeout є стандартною функцією JavaScript, яка використовується для затримки виклику функції на певний інтервал часу.
- Це може бути використано для затримки виклику функції один раз.
Debounce:
Debounce - це техніка, що затримує виклик функції до тих пір, поки не мине певний інтервал часу без нових викликів. Використовується для оптимізації і реагування на дії користувача, коли відомо, що може бути багато швидких подій.
Викликає функцію лише один раз після закінчення серії вхідних подій.
Якщо вам потрібно затримати виклик функції один раз після закінчення дії, то setTimeout може бути вибраним варіантом.
Якщо у вас є багато швидких подій, і ви хочете викликати функцію після закінчення серії подій, то debounce є кращим варіантом. Він дозволяє уникнути багатошвидкісних викликів і покращити продуктивність додатку.
Як працює bable в React
Babel - це транслятор (транспілятор) JavaScript, який дозволяє вам використовувати сучасний синтаксис JavaScript і транслювати його у код, який може розуміти більшість браузерів або інші середовища виконання JavaScript.
Основні принципи роботи Babel:
- Парсинг (Parsing): Першим етапом роботи Babel є парсинг вихідного коду JavaScript. Під час парсингу вихідного коду Babel аналізує синтаксис та структуру коду і створює внутрішню структуру даних, яку він може подальше обробити.
- AST (Abstract Syntax Tree): Після парсингу коду Babel створює AST - дерево абстрактного синтаксису. AST є інтерпретацією вихідного коду у вигляді дерева, де кожен вузол представляє синтаксичний елемент (такий як змінна, функція, виклик методу і т. д.).
- Трансформація (Transformation): Після отримання AST Babel може застосовувати різні плагіни трансформації, які змінюють AST згідно з визначеними правилами. Наприклад, Babel може використовувати плагіни для трансформації сучасного синтаксису JavaScript (такого як стрілкові функції, класи, async/await) в еквівалентний код, який може виконати браузер.
- Генерація коду (Code Generation): Змінений AST перетворюється назад в JavaScript-код. Цей крок включає в себе пройдення дерева і генерацію вихідного коду зміненої програми.
- Вивід (Output): Згенерований код виводиться у вигляді файлів або може бути направлений на інший об’єкт для подальшого використання.
Одним із найбільших використань Babel є трансляція коду, написаного з використанням сучасних стандартів ECMAScript (ES6, ES7 і так далі), в код, який може бути виконаний в старіших браузерах або у середовищах, що не підтримують останні синтаксичні фішки.
