React，我们需要谈谈派生状态！

心靈之曲

发布时间：2024-12-11 08:15:58

721人浏览过

来源于dev.to

转载

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 (
    
      
      
        {filteredproducts.map((product) => (
          {product.name}
        ))}
      
    
  );
};

export default productlist;

为什么这是不好的做法？

看起来很有效，对吧？搜索输入已连接，并按预期过滤产品。

但问题是：我们将过滤后的产品存储为单独的状态。这会导致不必要的数据重复。我们已经有处于状态的产品，并且我们将过滤操作的结果存储在另一个状态中，这会导致潜在的错误，增加内存使用量，并使所有内容保持同步变得更加困难。

基本上，我们让事情变得比他们需要的更复杂。

良好实践：使用派生状态

现在，让我们应用一点 react 智慧并使用 派生状态.

Calliper 文档对比神器

文档内容对比神器

下载

修复上述代码

这一次，我们将根据 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 (
    
      
      
        {filteredProducts.map((product) => (
          {product.name}
        ))}
      
    
  );
};

export default ProductList;

有什么改进？

过滤产品没有额外的状态：我们不再存储过滤产品的单独列表。相反，我们在每次渲染时直接从产品数组和 searchquery 中计算过滤后的列表。
更干净的代码：组件更简单，需要管理的状态更少。这使得它更容易阅读和维护。
性能提升（某种程度上）：react 不需要跟踪额外的状态变量。它只是直接从现有数据中导出过滤后的列表，使代码更精简、更快（尽管 react 优化了更新，但状态更改越少越好）。

此方法利用派生状态，其中过滤的产品是根据现有数据计算的，而不是存储过滤数据的额外副本。