使用 React 時，您經常會遇到需要根據其他狀態或 props 轉換或匯出值的情況。這個概念稱為派生狀態，如果使用得當，它是 React 工具包中最強大的工具之一。
「派生狀態：可以從現有的狀態或道具計算得到的狀態稱為派生狀態。」
所以，讓我們深入研究它並享受其中的樂趣。
讓我們從一個典型的「哎呀，我沒想到這一點」的例子開始。想像一下，我們有一個產品列表，我們希望根據用戶在搜尋輸入中輸入的內容來過濾它們。在理想的情況下，我們的搜尋應該動態更新並且超級快速。但是，讓我們先快速瀏覽一下不好的做法方法。
以下是我們不應該處理事情的方式：
import React, { useState } from 'react';
const ProductList = () => {
const [searchQuery, setSearchQuery] = useState('');
const [products, setProducts] = useState([
{ id: 1, name: 'Laptop' },
{ id: 2, name: 'Smartphone' },
{ id: 3, name: 'Headphones' },
{ id: 4, name: 'Smartwatch' },
]);
const [filteredProducts, setFilteredProducts] = useState(products);
const handleSearch = (e) => {
const query = e.target.value;
setSearchQuery(query);
setFilteredProducts(
products.filter(product =>
product.name.toLowerCase().includes(query.toLowerCase())
)
);
};
return (
<div>
<input
type="text"
value={searchQuery}
onChange={handleSearch}
placeholder="Search for a product"
/>
<ul>
{filteredProducts.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
};
export default ProductList;
為什麼這是不好的做法？
看起來很有效，對吧？搜尋輸入已連接，並按預期過濾產品。
但問題是：我們將過濾後的產品儲存為單獨的狀態。這會導致不必要的數據重複。我們已經有處於狀態的產品，我們將過濾操作的結果儲存在另一個狀態中，這會導致潛在的錯誤，增加記憶體使用量，並使所有內容保持同步變得更加困難。
基本上，我們讓事情變得比他們需要的更複雜。
現在，讓我們應用一點 React 智慧並使用 派生狀態.
修復上述程式碼這次，我們將根據 searchQuery 直接從 products 陣列中派生過濾後的產品，而不是保留兩個單獨的狀態變數（products 和filteredProducts）。這樣，我們就可以避免冗餘並保持狀態乾淨。
這是改良的版本：
import React, { useState } from 'react';
const ProductList = () => {
const [searchQuery, setSearchQuery] = useState('');
const products = [
{ id: 1, name: 'Laptop' },
{ id: 2, name: 'Smartphone' },
{ id: 3, name: 'Headphones' },
{ id: 4, name: 'Smartwatch' },
];
// Derived state: filter products based on the search query
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const handleSearch = (e) => {
setSearchQuery(e.target.value);
};
return (
<div>
<input
type="text"
value={searchQuery}
onChange={handleSearch}
placeholder="Search for a product"
/>
<ul>
{filteredProducts.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
};
export default ProductList;
有什麼改進？
此方法利用派生狀態，其中過濾的產品是根據現有資料計算的，而不是儲存過濾資料的額外副本。
雖然派生狀態通常是最好的選擇，但它並不是解決所有問題的靈丹妙藥。如果您的元件正在處理應用程式多個部分所需的複雜計算或狀態，那麼最好使用 memoization 或將該派生狀態儲存在更高層級的元件或上下文中。
但是對於簡單的過濾、排序或其他輕量級派生值，上面的範例應該是您的首選方法。
總而言之，React 中的衍生狀態就是保持事物乾燥－不要重複自己。不要在狀態中保留相同資料的不必要副本，而是根據現有狀態和屬性動態計算值。這會帶來更乾淨、更有效率、更易於維護的程式碼。因此，下次當您想在 React 中複製資料時，請考慮是否可以直接從其他來源計算它。未來的你會感謝你的！
以上是React，我們需要談談派生狀態！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
