React 中的代理：你不知道自己需要的偷偷摸摸的国家间谍-js教程-PHP中文网

React 中的代理：你不知道自己需要的偷偷摸摸的国家间谍

PHPz

发布： 2024-08-26 21:42:18

原创

726 人浏览过

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

登录后复制