在處理狀態陣列和物件時,您需要確保它們的更新是不可變的。這可以防止可能導致錯誤的不必要的突變。
管理物件陣列
const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]); const addItem = (newItem) => { setItems(prevItems => [...prevItems, newItem]); }; const removeItem = (id) => { setItems(prevItems => prevItems.filter(item => item.id !== id)); };
更新狀態中的物件
const [user, setUser] = useState({ name: '', age: 0 }); const updateUser = (field, value) => { setUser(prevUser => ({ ...prevUser, [field]: value })); };
將功能更新與 useState 結合使用可以幫助您避免依賴當前狀態時出現問題,尤其是在非同步情況下。
const increment = () => { setCount(prevCount => prevCount + 1); };
您可以使用函數設定初始狀態,這對於昂貴的計算或初始值從 props 派生時非常有用。
const [count, setCount] = useState(() => { const savedCount = localStorage.getItem('count'); return savedCount ? JSON.parse(savedCount) : 0; });
在表單中使用 useState 來控制輸入:
const Form = () => { const [formData, setFormData] = useState({ name: '', email: '' }); const handleChange = (e) => { const { name, value } = e.target; setFormData(prevData => ({ ...prevData, [name]: value })); }; return ( <form> <input type="text" name="name" value={formData.name} onChange={handleChange} /> <input type="email" name="email" value={formData.email} onChange={handleChange} /> </form> ); };
您可以使用 useState 和 useEffect 來建立去抖輸入:
const DebouncedInput = () => { const [inputValue, setInputValue] = useState(''); const [debouncedValue, setDebouncedValue] = useState(inputValue); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(inputValue); }, 300); return () => { clearTimeout(handler); }; }, [inputValue]); return ( <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> ); };
取得資料時,最好處理組件卸載,以避免在已卸載的組件上設定狀態。
useEffect(() => { let isMounted = true; const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const result = await response.json(); if (isMounted) { setData(result); } }; fetchData(); return () => { isMounted = false; // Cleanup }; }, []);
您可以訂閱 WebSocket 連線或其他外部資料來源等事件。
useEffect(() => { const socket = new WebSocket('ws://example.com/socket'); socket.onmessage = (event) => { const message = JSON.parse(event.data); setMessages(prevMessages => [...prevMessages, message]); }; return () => { socket.close(); // Cleanup on unmount }; }, []);
您可以使用 useEffect 進行動畫或直接 DOM 操作:
useEffect(() => { const element = document.getElementById('animate'); element.classList.add('fade-in'); return () => { element.classList.remove('fade-in'); // Cleanup }; }, []);
如果省略相依性數組,您的效果將在每次渲染後運行,可能會導致效能問題。
// Avoid this if you only want it to run once useEffect(() => { // Logic here });
確保包含效果中使用的所有變數:
useEffect(() => { console.log(value); // Make sure 'value' is included in the dependency array }, [value]); // Include all dependencies
在根據先前的值更新狀態時,請務必使用 setter 的函數形式,以避免過時的閉包:
setCount(prevCount => prevCount + 1); // Correct
useState 和 useEffect 都是 React 中必不可少的鉤子,可讓您有效管理狀態並處理功能元件中的副作用。了解進階用例和模式可以幫助您編寫更清晰、更有效率的 React 程式碼。
以上是利用 React 的力量:useState 和 useEffect 綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!