Metaprogrammierung mit React

Der Zweck besteht nicht darin, im Detail auf Metaprogrammierung und ihre Techniken einzugehen, sondern lediglich ein Beispiel dafür zu sehen, wie man sie in React anwendet.

Dies ist mein erster Beitrag zu diesem fantastischen Medium und ich möchte ein wenig über eine Technik schreiben, die wir bereits einmal in unserem Leben verwendet haben (von einem Programmierer), die wir aber möglicherweise nicht im Detail kennen: Metaprogrammierung !

Der folgende Code ist ein Beispiel für die Verwendung des Proxy- Konstrukts und der Reflect- API innerhalb einer React-Komponente. Die MyComponent- Komponente verwendet den lokalen Status von React ( useState ), um ein ProxyData- Objekt zu verwalten, das über eine anfänglich leere „ test “-Eigenschaft verfügt. Die Komponente verfügt über drei Schaltflächen, die beim Klicken die Eigenschaft „test“ des ProxyData- Objekts ändern.

import React, { useState } from 'react';

function MyComponent() {
  const [proxyData, setProxyData] = useState({ test: '' });
  const [render, setRender] = useState(false);

  const handleClickMemo = React.useCallback(() => {
    const updatedData = new Proxy(proxyData, {
      set(target, prop, value) {
        const success = Reflect.set(target, prop, value);
        if (success) {
          console.log(`Prop ${prop} modified with value ${value}`);
        }
        return success;
      },
    });
    updatedData.test = crypto.randomUUID();
    setProxyData(updatedData);
  }, []);

  // without useCallback, do new proxy every time
  const handleClick = () => {
    const updatedData = new Proxy(proxyData, {
      set(target, prop, value) {
        const success = Reflect.set(target, prop, value);
        if (success) {
          console.warn(`Prop ${prop} modified with value ${value}`);
        }
        return success;
      },
    });
    updatedData.test = crypto.randomUUID();
    setProxyData(updatedData);
  };

  // case where react doesn't render, but in console,
  // if it is a proxy the object is updated
  // BE CAREFUL when using proxies
  const handleClickNoRender = () => {
    proxyData.test = crypto.randomUUID();
    setProxyData(proxyData);
  };

  return (
    <div>
      <pre>{JSON.stringify(proxyData)}</pre>
      <button onClick={handleClickMemo}>handleClickMemo</button>
      <button onClick={handleClick}>handleClick</button>
      <button onClick={handleClickNoRender}>handleClickNoRender</button>
      <br />
      <button onClick={() => setRender(!render)}>re-render</button>
    </div>
  );
}

export default function App() {
  return <MyComponent />;
}

Die erste Schaltfläche, handleClickMemo , verwendet die Funktion React.useCallback, um eine Funktion zu erstellen, die von React zwischengespeichert wird. Dies ist nützlich, um zu vermeiden, dass die Funktion bei jeder Aktualisierung der Komponente neu erstellt wird. Die Funktion erstellt ein neues Proxy- Objekt basierend auf dem ProxyData- Objekt, aktualisiert die Eigenschaft „test“ mit einem zufällig generierten neuen Wert und legt den Status von ProxyData mit dem neu erstellten Objekt fest.

const handleClickMemo = React.useCallback(() => {
    const updatedData = new Proxy(proxyData, {
      set(target, prop, value) {
        const success = Reflect.set(target, prop, value);
        if (success) {
          console.log(`Prop ${prop} modified with value ${value}`);
        }
        return success;
      },
    });
    updatedData.test = crypto.randomUUID();
    setProxyData(updatedData);
  }, []);

// without useCallback, do new proxy every time
  const handleClick = () => {
    const updatedData = new Proxy(proxyData, {
      set(target, prop, value) {
        const success = Reflect.set(target, prop, value);
        if (success) {
          console.warn(`Prop ${prop} modified with value ${value}`);
        }
        return success;
      },
    });
    updatedData.test = crypto.randomUUID();
    setProxyData(updatedData);
  };

// case where react doesn't render, but in console,
  // if it is a proxy the object is updated
  // BE CAREFUL when using proxies
  const handleClickNoRender = () => {
    proxyData.test = crypto.randomUUID();
    setProxyData(proxyData);
  };

Es ist wichtig zu beachten, dass die Verwendung eines Proxys Nebenwirkungen haben und bei unsachgemäßer Verwendung zu Leistungsproblemen führen kann. Außerdem wird die Aktualisierung von Zuständen über ein Proxy- Objekt möglicherweise nicht von React erkannt. Daher ist bei der Verwendung von Proxies innerhalb einer React-Komponente Vorsicht geboten.

Unter diesem Link können Sie in der Konsole das Verhalten jeder Schaltfläche sehen.