您聽過 Javascript 代理嗎?我設法透過在 React 元件中使用 useReducer 來替換它。
在這篇文章中,我將向您展示如何利用代理來無縫檢測嵌套狀態的變化,保持組件更新,並告別手動深度克隆和其他令人頭痛的問題。
JavaScript 的 Proxy 就像一個超級間諜,可以攔截和自訂對物件執行的操作,例如取得、設定或刪除屬性。這使得它非常適合監聽狀態變化,即使是在巢狀物件中,也不需要深度比較或不必要的重新渲染。
這就是我們的目標:
在我們深入與 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 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; }
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> ); }
雖然代理商很強大,但也有一些注意事項:
以上是React 中的代理:你不知道自己需要的偷偷摸摸的國家間諜的詳細內容。更多資訊請關注PHP中文網其他相關文章!