Και τα τρία μοιράζονται τη λογική μεταξύ των στοιχείων, αλλά εξελίχθησαν με την πάροδο του χρόνου και τα custom hooks είναι το σύγχρονο πρότυπο για την κοινή χρήση λογικής.
Μια συνάρτηση που παίρνει ένα στοιχείο και επιστρέφει ένα βελτιωμένο:
= => {
user = ();
user ? : ;
};
= ();
Μειονεκτήματα: ένθεση περιτυλίγματος ("κόλαση περιτυλίγματος" στο δέντρο), σύγκρουση ονομάτων props και είναι ασαφές από πού προέρχονται τα ενέσιμα props.
Ένα στοιχείο παίρνει μια συνάρτηση ως παιδί του για να μοιράσει την κατάσταση:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Εύκαμπτο, αλλά η ένθεση αρκετών στοιχείων render-prop δημιουργεί μια "πυραμίδα επανακλήσεων".
Εξαγάγετε τη λογική κατάστασης σε μια συνάρτηση useX — χωρίς επιπλέον ένθεση δέντρου, ρητή ροή δεδομένων:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/στοιχεία).