Зміст курсу
Опановуємо React
Опановуємо React
Вступ: React Хуки та Контекст
React Хуки (Hooks) та Контекст (Context) змінили підхід до управління станами та обміну даними в React-додатках. З появою хуків у версії 16.8 у 2019 році розробники отримали можливість використовувати методи станів та життєвого циклу у функціональних компонентах, що призвело до більш стислого та читабельного коду.
З іншого боку, Context надає спрощений спосіб обміну даними між компонентами без використання пропсів. Ми дослідимо потужну синергію між хуками React і контекстом, продемонструємо їхній спільний потенціал у спрощенні складного управління станами і полегшенні безперешкодного потоку даних по всьому дереву компонентів.
У наступних розділах ми детально розглянемо наступне:.
Хук State
useState
дозволяє компоненту зберігати та відтворювати інформацію (наприклад, дані, введені користувачем). Наприклад, компонент форми може використовувати стан для збереження введеного значення, в той час як компонент галереї зображень може покладатися на стан для відстеження індексу вибраного зображення.
function Form() {
const [value, setValue] = useState('');
// ...
}
Хук Ref
useRef
надає можливість компоненту зберігати інформацію, яка не підлягає рендерингу, наприклад, DOM-вузол або ідентифікатор таймауту. На відміну від стану, модифікація рефа не призводить до перезавантаження компонента. Рефи слугують "аварійним люком" від типової парадигми React і стають у нагоді при взаємодії з нереактівськими системами, такими як нативні API браузерів.
function Form() {
const inputRef = useRef(null);
// ...
}
Хук Effect
useEffect
дозволяє компоненту встановлювати поєднання та синхронізуватися із зовнішніми системами, включаючи взаємодію з мережами, маніпулювання DOM браузера, обробку анімації, інтеграцію віджетів, розроблених за допомогою різних бібліотек, а також безперешкодне включення нереактівного коду.
function Animation({ animationId }) {
useEffect(() => {
const animation = createAnimation(animationId);
animation.start();
// Cleaning up the animation when the component unmounts
return () => animation.stop();
}, [animationId]);
// ...
}
Хук Memo
useMemo
підвищує продуктивність рендерингу, мінімізуючи непотрібні обчислення. Наприклад, ми можемо вказати React повторно використати кешовані обчислення або уникнути повторного рендерингу, якщо дані не змінилися з моменту попереднього рендерингу.
function NewspaperList({ data, filter }) {
const filteredData = useMemo(
() => performFiltering(data, filter),
[data, filter]
);
// ...
}
Хук Context
useContext
дозволяє компоненту отримувати доступ до інформації від віддалених батьків без передачі пропсів. Він дозволяє компоненту верхнього рівня в додатку безперешкодно передавати поточну тему інтерфейсу всім компонентам-нащадкам, незалежно від їхньої глибини в дереві компонентів.
function Section() {
const theme = useContext(ThemeContext);
// ...
}
Дякуємо за ваш відгук!