在使用 react 时，您经常会遇到需要根据其他状态或 props 转换或导出值的情况。这个概念被称为派生状态，如果使用得当，它是 react 工具包中最强大的工具之一。
“派生状态：可以从现有的状态或道具计算得到的状态称为派生状态。”所以，让我们深入研究它并享受其中的乐趣。
不良做法：过滤产品列表
让我们从一个典型的“哎呀，我没想到这一点”的例子开始。想象一下，我们有一个产品列表，我们希望根据用户在搜索输入中输入的内容来过滤它们。在理想的情况下，我们的搜索应该动态更新并且超级快速。但是，让我们先快速浏览一下不好的做法方法。
以下是我们不应该处理事情的方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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）。这样，我们就可以避免冗余并保持状态干净。
这是改进的版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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中文网其它相关文章！