React のプロキシ: 必要だと知らなかった卑劣な国家スパイ

JavaScript プロキシについて聞いたことがありますか? useReducer を React コンポーネント内で使用することで置き換えることができました。

この投稿では、プロキシを活用してネストされた状態の変更をシームレスに検出し、コンポーネントを最新の状態に保ち、手動によるディープ クローン作成やその他の問題に別れを告げる方法を説明します。

プロキシの何が重要なのでしょうか?

JavaScript のプロキシは、プロパティの取得、設定、削除など、オブジェクトに対して実行される操作を傍受してカスタマイズできるスーパースパイのようなものです。これにより、ネストされたオブジェクトであっても、深い比較や不必要な再レンダリングを必要とせずに、状態の変化をリッスンするのに最適です。

これが私たちの目標です:

• ネストされたプロパティが変更されると自動的に更新されるリアクティブな状態。
• 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 フックに統合します。初期状態をラップし、変更があった場合に React の再レンダリングが自動的にトリガーされるようにする useProxyState フックを作成します。

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 中国語 Web サイトの他の関連記事を参照してください。