React のプロキシ: 必要だと知らなかった卑劣な国家スパイ-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-26 21:42:18

オリジナル

814 人が閲覧しました

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

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

ログイン後にコピー