React，我們需要談談派生狀態！

使用 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;

有什麼改進？

1. 過濾產品沒有額外的狀態：我們不再儲存過濾產品的單獨清單。相反，我們在每次渲染時直接從產品數組和 searchQuery 計算過濾後的列表。
2. 更乾淨的程式碼：元件更簡單，需要管理的狀態更少。這使得它更容易閱讀和維護。
3. 效能提升（某種程度上）：React 不需要追蹤額外的狀態變數。它只是直接從現有資料中匯出過濾後的列表，使程式碼更精簡、更快（儘管 React 優化了更新，但狀態變更越少越好）。

此方法利用派生狀態，其中過濾的產品是根據現有資料計算的，而不是儲存過濾資料的額外副本。

---

何時不使用派生狀態

雖然派生狀態通常是最好的選擇，但它並不是解決所有問題的靈丹妙藥。如果您的元件正在處理應用程式多個部分所需的複雜計算或狀態，那麼最好使用 memoization 或將該派生狀態儲存在更高層級的元件或上下文中。

但是對於簡單的過濾、排序或其他輕量級派生值，上面的範例應該是您的首選方法。

---

結論

總而言之，React 中的衍生狀態就是保持事物乾燥－不要重複自己。不要在狀態中保留相同資料的不必要副本，而是根據現有狀態和屬性動態計算值。這會帶來更乾淨、更有效率、更易於維護的程式碼。因此，下次當您想在 React 中複製資料時，請考慮是否可以直接從其他來源計算它。未來的你會感謝你的！

---

以上是React，我們需要談談派生狀態！的詳細內容。更多資訊請關注PHP中文網其他相關文章！