Dans cet article, nous verrons comment se débarrasser de React.Context dans vos applications et trouverons une motivation pour le faire.
Vous connaissez probablement React et avez peut-être déjà eu une expérience avec React.Context si vous êtes tombé sur cet article, mais sinon, n'hésitez pas à le lire quand même et à le partager avec les personnes qui pourraient être intéressées.
Le contexte dégrade la lisibilité, enchevêtre et restreint l'application.
Jetez simplement un œil à cet exemple de base :
<ThemeContext.Provider value={theme}> <AuthContext.Provider value={currentUser}> <ModalContext.Provider value={modal}> <VolumeContext.Provider value={volume}> <RouterProvider router={router} /> </VolumeContext.Provider> </ModalContext.Provider> </AuthContext.Provider> </ThemeContext.Provider>
Ça n’a pas l’air trop compréhensible et fiable, n’est-ce pas ?
Voici quelques problèmes potentiels lors de l'utilisation de contextes :
Fait amusant : la fameuse "promesse-enfer" se ressemble ?♂️
loadClients() .then((client) => { return populate(client) .then((clientPopulated) => { return commit(clientPopulated); }); });Copier après la connexion
Créez plutôt des crochets.
Remplacons ThemeContext de l'exemple ci-dessus par un hook useTheme personnalisé :
import { useAppEvents } from 'use-app-events'; const useTheme = () => { const [theme, setTheme] = useState('dark'); /** Set up communication between the instances of the hook. */ const { notifyEventListeners, listenForEvents } = useAppEvents(); listenForEvents('theme-update', (themeNext: string) => { setTheme(themeNext); }); const updateTheme = (themeNext: string) => { setTheme(themeNext); notifyEventListeners('theme-update', themeNext); }; return { theme, updateTheme, }; };
Nous avons utilisé un package npm appelé use-app-events pour permettre à toutes les instances du hook useTheme de communiquer afin de synchroniser l'état de leur thème. Cela garantit que la valeur du thème sera la même lorsque useTheme est appelé plusieurs fois dans l'application.
De plus, grâce au package use-app-events, le thème sera synchronisé même entre les onglets du navigateur.
À ce stade, ThemeContext n'est plus nécessaire car le hook useTheme peut être utilisé n'importe où dans l'application pour obtenir le thème actuel et le mettre à jour :
const App = () => { const { theme, updateTheme } = useTheme(); updateTheme('light'); // Output: <div>Current theme: light</div> return <div>Current theme: {theme}</div>; }
Quels sont les avantages de l'approche :
React.Context était certainement un outil puissant il y a quelque temps, mais les hooks offrent un moyen plus contrôlé et plus fiable de gérer l'état global de votre application s'ils sont correctement implémentés en conjonction avec le package use-app-events.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!