首頁  >  文章  >  web前端  >  React 中的代理:你不知道自己需要的偷偷摸摸的國家間諜

React 中的代理:你不知道自己需要的偷偷摸摸的國家間諜

PHPz
PHPz原創
2024-08-26 21:42:18802瀏覽

Proxies in React: The Sneaky State Spy You Didn’t Know You Needed

您聽過 Javascript 代理嗎?我設法透過在 React 元件中使用 useReducer 來替換它。

在這篇文章中,我將向您展示如何利用代理來無縫檢測嵌套狀態的變化,保持組件更新,並告別手動深度克隆和其他令人頭痛的問題。

代理有什麼大不了的?

JavaScript 的 Proxy 就像一個超級間諜,可以攔截和自訂對物件執行的操作,例如取得、設定或刪除屬性。這使得它非常適合監聽狀態變化,即使是在巢狀物件中,也不需要深度比較或不必要的重新渲染。

這就是我們的目標:

  • 當任何巢狀屬性變更時自動更新的反應狀態。
  • 不再需要手動複製深層巢狀物件來觸發 React 更新。
  • 以最小的努力處理陣列和巢狀結構。

入門:設定代理

在我們深入與 React 整合之前,讓我們先詳細介紹一下如何設定處理巢狀物件的代理。這個想法很簡單:將您的初始狀態包裝在代理中,該代理可以監視任何變更並在需要時觸發更新。

這是一個基本範例:

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

將代理與 React 集成

現在有趣的部分來了——將此代理設定整合到 React hook 中!我們將建立一個 useProxyState 鉤子來包裝我們的初始狀態並確保任何變更自動觸發 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;
}

讓我們將它用在 React 元件中

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

陷阱和需要注意的事項

雖然代理商很強大,但也有一些注意事項:

  • 注意非常大或深層嵌套物件的效能。
  • JavaScript 的代理程式無法在不支援它的環境中工作(例如舊版瀏覽器)。

以上是React 中的代理:你不知道自己需要的偷偷摸摸的國家間諜的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn