首页 > web前端 > js教程 > React,我们需要谈谈派生状态!

React,我们需要谈谈派生状态!

Patricia Arquette
发布: 2024-12-14 02:13:10
原创
870 人浏览过

React, we need to talk about Derived States!

使用 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板