Proksi dalam React: Perisik Negeri Sneaky yang Anda Tidak Tahu yang Anda Perlukan

Pernahkah anda mendengar tentang Proksi Javascript? Saya berjaya menggantikan useReducer dengan menggunakannya di dalam komponen React.

Dalam siaran ini, saya akan menunjukkan kepada anda cara memanfaatkan proksi untuk mengesan perubahan dalam keadaan bersarang dengan lancar, memastikan komponen anda dikemas kini dan mengucapkan selamat tinggal kepada pengklonan dalam manual dan sakit kepala yang lain.

Apakah Tawaran Besar Mengenai Proksi?

Proksi JavaScript adalah seperti pengintip super yang boleh memintas dan menyesuaikan operasi yang dilakukan pada objek, seperti mendapatkan, menetapkan atau memadamkan sifat. Ini menjadikannya sempurna untuk mendengar perubahan keadaan, walaupun dalam objek bersarang, tanpa memerlukan perbandingan yang mendalam atau pemaparan semula yang tidak perlu.

Inilah yang kami sasarkan:

• Keadaan reaktif yang dikemas kini secara automatik apabila sebarang sifat bersarang berubah.
• Tiada lagi pengklonan manual objek bersarang dalam untuk mencetuskan kemas kini React.
• Mengendalikan tatasusunan dan struktur bersarang dengan usaha yang minimum.

Bermula: Menyediakan Proksi

Sebelum kita menyepadukan dengan React, mari kita pecahkan cara menyediakan proksi yang mengendalikan objek bersarang. Ideanya mudah: bungkus keadaan awal anda dalam proksi yang boleh mengintip sebarang perubahan dan mencetuskan kemas kini apabila diperlukan.

Berikut ialah contoh asas:

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

Mengintegrasikan Proksi dengan React

Kini tiba bahagian yang menyeronokkan—menyepadukan persediaan proksi ini ke dalam cangkuk React! Kami akan membuat cangkuk useProxyState yang membungkus keadaan awal kami dan memastikan sebarang perubahan mencetuskan pemaparan semula React secara automatik.

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

Mari kita gunakannya menjadi komponen tindak balas

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 (
    <div>
      <h1>Name: {state.name}</h1>
      <h2>Age: {state.details.age}</h2>
      <h3>Hobbies:</h3>
      <ul>
        {state.details.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      <button onClick={updateName}>Update Name</button>
      <button onClick={addHobby}>Add Hobby</button>
    </div>
  );
}

Perangkap dan Perkara yang Perlu Diperhatikan

Walaupun proksi berkuasa, terdapat beberapa kaveat:

• Berhati-hati dengan prestasi dalam objek yang sangat besar atau bersarang dalam.
• Proksi JavaScript tidak berfungsi dalam persekitaran yang tidak menyokongnya (seperti pelayar lama).

Atas ialah kandungan terperinci Proksi dalam React: Perisik Negeri Sneaky yang Anda Tidak Tahu yang Anda Perlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!