Metaprogramming dengan React

Tujuannya bukan untuk menjelaskan secara detail tentang apa itu metaprogramming dan tekniknya, tetapi hanya untuk melihat contoh penerapannya di React.

Ini adalah posting pertama saya di media yang luar biasa ini, dan saya ingin menulis sedikit tentang satu teknik yang telah kami gunakan sekali dalam hidup kami (dari seorang programmer), tetapi mungkin tidak kami ketahui secara detail, metaprogramming !

Kode di bawah ini adalah contoh cara menggunakan konstruksi Proxy dan Reflect API, di dalam komponen React. Komponen MyComponent menggunakan status lokal React ( useState ) untuk mengelola objek proxyData yang awalnya memiliki properti " test " kosong. Komponen tersebut memiliki tiga tombol yang, ketika diklik, mengubah properti “test” dari objek proxyData .

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 />;
}

Tombol pertama, handleClickMemo , menggunakan fungsi React.useCallback untuk membuat fungsi yang di-cache oleh React. Ini berguna untuk menghindari fungsi dibangun kembali setiap kali komponen diperbarui. Fungsi membuat objek Proxy baru berdasarkan objek proxyData , memperbarui properti "test" dengan nilai baru yang dibuat secara acak, dan menyetel status proxyData dengan objek yang baru dibuat.

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);
  };

Penting untuk dicatat bahwa menggunakan Proxy dapat memiliki efek samping dan dapat menyebabkan masalah kinerja jika tidak digunakan dengan benar. Selain itu, memperbarui status melalui objek Proxy mungkin tidak terdeteksi oleh React, jadi harus berhati-hati saat menggunakan Proxies dalam komponen React.

Di tautan ini , Anda dapat melihat perilaku setiap tombol di konsol.