Το React είναι η δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη βασισμένων σε δομοστοιχεία.
Συναρτησιακά Στοιχεία και JSX
import React, { useState } from 'react';
export function Greeting({ name, role = "Member" }) {
return (
<div className="card">
<h2>Hello, {name}!</h2>
<span className="badge">{role}</span>
</div>
);
}
Βασικά Hooks του React
useState
const [count, setCount] = useState(0);
// Συναρτησιακή ενημέρωση κατάστασης (διασφαλίζει την πιο πρόσφατη τιμή)
setCount((prev) => prev + 1);
useEffect
Διαχειρίζεται παρενέργειες όπως ανάκτηση δεδομένων, συνδρομές και αλλαγές στο DOM:
useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Η συνάρτηση καθαρισμού εκτελείται κατά την αποπροσάρτηση
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // Κενός πίνακας εξαρτήσεων: εκτελείται μία φορά κατά την προσάρτηση
useContext
Κατανάλωση κοινόχρηστων δεδομένων χωρίς prop-drilling:
const ThemeContext = React.createContext('light');
function Display() {
const theme = useContext(ThemeContext);
return <div className={`theme-${theme}`}>Active Theme</div>;
}
useMemo και useCallback
Βελτιστοποιήσεις απόδοσης για απαιτητικούς υπολογισμούς:
// Απομνημόνευση αποτελέσματος βαριού υπολογισμού
const filteredUsers = useMemo(() => {
return users.filter((u) => u.score > threshold);
}, [users, threshold]);
// Απομνημόνευση ορισμού συνάρτησης επανάκλησης
const handleRemove = useCallback((id) => {
setItems((prev) => prev.filter((item) => item.id !== id));
}, []);
useRef
Αποθήκευση μεταβαλλόμενων τιμών χωρίς πρόκληση επανασχεδίασης:
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return <input ref={inputRef} />;
Προσαρμοσμένα Hooks (Custom Hooks)
Εξαγωγή επαναχρησιμοποιήσιμης λογικής κατάστασης σε συναρτήσεις με πρόθεμα use:
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return isOnline;
}
Fragments και Portals
// Fragments χωρίς επιπλέον περιτυλίγματα στο DOM
return (
<>
<Header />
<MainContent />
</>
);
// Απόδοση σε εξωτερικό κόμβο DOM
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
<div className="modal-overlay">{children}</div>,
document.getElementById('modal-root')
);
}