Avez-vous entendu parler du proxy Javascript ? J'arrive à remplacer useReducer en l'utilisant dans le composant React.

Dans cet article, je vais vous montrer comment exploiter les proxys pour détecter de manière transparente les changements dans l'état imbriqué, maintenir vos composants à jour et dire adieu au clonage profond manuel et autres maux de tête.

Quel est le problème avec les proxys ?

Le proxy de JavaScript est comme un super-espion qui peut intercepter et personnaliser les opérations effectuées sur un objet, telles que l'obtention, la définition ou la suppression de propriétés. Cela le rend parfait pour écouter les changements d'état, même dans les objets imbriqués, sans avoir besoin d'une comparaison approfondie ou de nouveaux rendus inutiles.

Voici ce que nous visons :

• État réactif qui se met à jour automatiquement lorsqu'une propriété imbriquée change.
• Plus de clonage manuel d'objets profondément imbriqués pour déclencher les mises à jour de React.
• Gérer les tableaux et les structures imbriquées avec un minimum d'effort.

Mise en route : configuration du proxy

Avant de nous lancer dans l'intégration avec React, expliquons comment configurer un proxy qui gère les objets imbriqués. L'idée est simple : enveloppez votre état initial dans un proxy qui peut espionner toute modification et déclencher une mise à jour en cas de besoin.

Voici un exemple simple :

function createNestedProxy(state, onChange) { if (typeof state !== 'object' || state === null) { return state; // Return primitive values as-is } const handler = { get(target, property) { const value = target[property]; if (typeof value === 'object' && value !== null) { return createNestedProxy(value, onChange); // Recursively proxy nested objects } return value; }, set(target, property, value) { if (target[property] === value) return true; // No change, no update if (typeof value === 'object' && value !== null) { value = createNestedProxy(value, onChange); // Proxy nested objects } target[property] = value; onChange(); // Trigger the change callback return true; } }; return new Proxy(state, handler); }

Intégration du proxy avec React

Vient maintenant la partie amusante : intégrer cette configuration de proxy dans un hook React ! Nous allons créer un hook useProxyState qui enveloppe notre état initial et garantit que toute modification déclenche automatiquement les nouveaux rendus React.

import { useState, useEffect } from 'react'; export function useProxyState(initialState) { const [state, setState] = useState(initialState); useEffect(() => { // Create a proxy with the onChange callback to trigger state updates const proxiedState = createProxyState(state, st => { // Trigger a React state update console.log('state updated'); setState({ ...proxiedState }); }); // Set the state to the proxied state on the first render setState(proxiedState); }, []); return state; }

Utilisons-le dans un composant de réaction

import { useProxyState } from './proxy'; function App() { const state = useProxyState({ name: "Alice", details: { age: 25, hobbies: ["reading", "coding"] } }); const updateName = () => { state.name = "Bob"; }; const addHobby = () => { state.details.hobbies.push("gaming"); }; return ( 
 
Name: {state.name}
 
Age: {state.details.age}
 
Hobbies:
 
 {state.details.hobbies.map((hobby, index) => ( 
{hobby}
 ))} 
 Update Name Add Hobby 
 ); }

Pièges et points à surveiller

Bien que les proxys soient puissants, il y a quelques mises en garde :

• Soyez attentif aux performances des objets très grands ou profondément imbriqués.
• Le proxy JavaScript ne fonctionne pas dans les environnements qui ne le prennent pas en charge (comme les anciens navigateurs).

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!