В мире разработки веб-приложений React стал одной из наиболее популярных библиотек для создания пользовательских интерфейсов. Благодаря своей гибкости, производительности и обширному сообществу, React предлагает множество возможностей для создания динамических и интерактивных веб-приложений. Однако для полного раскрытия потенциала React часто требуется использование дополнительных API и библиотек. В этой статье мы рассмотрим несколько полезных API React, которые помогут вам создавать гибкие компоненты с использованием TypeScript.
React Hooks
React Hooks — это набор функций, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Они были представлены в React 16.8 и с тех пор стали одной из ключевых особенностей этой библиотеки.
useState
Хук useState позволяет добавить состояние в функциональные компоненты. Он принимает начальное значение состояния и возвращает пару значений: текущее состояние и функцию для его обновления.
import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); return ( <div> <button onClick={decrement}>-</button> <span>{count}</span> <button onClick={increment}>+</button> </div> ); }; useEffect
Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Он принимает функцию, которая будет вызываться после каждого рендера компонента, а также массив зависимостей, который определяет, когда эффект должен перезапускаться.
import React, { useState, useEffect } from 'react'; const Clock = () => { const [time, setTime] = useState(new Date()); useEffect(() => { const interval = setInterval(() => { setTime(new Date()); }, 1000); return () => clearInterval(interval); }, []); return ( <div> <h1>{time.toLocaleTimeString()}</h1> </div> ); }; В этом примере хук useEffect используется для создания интервала, который обновляет состояние time каждую секунду. Функция, возвращаемая из useEffect, выполняется при размонтировании компонента и очищает интервал.
React Context API
React Context API предоставляет способ передачи данных через дерево компонентов, не прибегая к долгой цепочке пропсов. Это особенно полезно при работе с глобальным состоянием, темами или любой другой данными, которые необходимо использовать в нескольких компонентах.
import React, { createContext, useState, useContext } from 'react'; const ThemeContext = createContext(null); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); }; return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); }; const Button = () => { const { theme, toggleTheme } = useContext(ThemeContext); return ( <button style={{ backgroundColor: theme === 'light' ? '#000' : '#fff', color: theme === 'light' ? '#fff' : '#000', }} onClick={toggleTheme} > Toggle Theme </button> ); }; В этом примере создается контекст ThemeContext и компонент-провайдер ThemeProvider, который управляет состоянием темы. Компонент Button использует хук useContext для доступа к значениям из контекста и изменения темы при нажатии на кнопку.
React Portals
React Portals позволяют рендерить дочерние компоненты в DOM-узле, который находится вне иерархии компонентов. Это может быть полезно для создания модальных окон, тултипов или любых других компонентов, которые должны быть визуально отделены от основного приложения.
import React, { useState, useRef } from 'react'; import ReactDOM from 'react-dom'; const Modal = ({ children }) => { const [isOpen, setIsOpen] = useState(false); const modalRef = useRef(null); const openModal = () => setIsOpen(true); const closeModal = () => setIsOpen(false); if (!isOpen) { return <button onClick={openModal}>Open Modal</button>; } return ReactDOM.createPortal( <div ref={modalRef} style={{ position: 'absolute' }}> <div style={{ backgroundColor: 'white', padding: '1rem' }}> {children} <button onClick={closeModal}>Close Modal</button> </div> </div>, document.body ); }; В этом примере компонент Modal использует ReactDOM.createPortal для рендеринга содержимого модального окна в document.body. Это позволяет модальному окну визуально отделиться от остальной части приложения и избежать проблем с наложением и позиционированием.
React Refs
React Refs предоставляют способ получения ссылки на DOM-элемент или экземпляр React-компонента. Они могут быть полезны в таких случаях, как фокусировка на поле ввода, вызов императивных методов компонента или интеграция с библиотеками, работающими напрямую с DOM.
