有什么办法可以提高 React 中这个函数的性能吗？答案

【问题标题】：Is there any way I can improve the performance of this function in React?有什么办法可以提高 React 中这个函数的性能吗？
【发布时间】：2020-11-16 02:46:11
【问题描述】：

问题

我有两个触发事件的输入，这将更新特定产品的数量（这些输入引用到产品）。

而且由于我可以写一个数字，例如数量，非常快，通常很慢。

需要 1-2 秒（当我有更多产品时）更新产品数量...

更新产品的函数会返回一个新的basket，它基本上就是所有产品所在的“购物车”，然后我会用新的（带有修改）。

我应该实施什么样的性能改进？

注意：我正在使用 React，该函数属于 Context API。

方法：修改ProductQuantity()

export const modifyProductQuantity = (
  productToModify: ProductInterface,
  quantity: number,
  basket: ProductInterface[]
): ProductInterface[] => {
  const basketWithUpdatedProduct = basket.map((product) => {
    if (product.id === productToModify.id) {
      const totalPrice = product.pricePerMeasurement * quantity;
      const roundedTotalPrice = parseFloat(totalPrice.toFixed(2));
      const roundedTotalQuantity = parseFloat(quantity.toFixed(2));
      return {
        ...product,
        quantity: roundedTotalQuantity,
        price: roundedTotalPrice,
      };
    }
    return product;
  });
  return basketWithUpdatedProduct;
};

我可能的解决方案：

如果我在后台处理产品修改，我可能会获得更好的性能，它的工作原理是这样的：

例如，每次更改输入时，我都会运行 3 秒的 setTimeOut。
如果我再次更改输入，将运行另一个 setTimeOut。
因此我只会在用户停止输入时运行该函数

你们怎么看？？？

【问题讨论】：

basketWithUpdatedProduct 的长度很长？
你解释的解决方案叫做去抖动。
它没有。最多可以达到20个！但是我已经看到，当我添加产品时，比如 6，它会变得更慢，因为我更改输入值（数量）需要 1 秒@kyun
太好了，谢谢@JacobSmit。我想我可以用它来实现我想要的，或者你认为有更好的方法吗？
实际上更新内存中的值应该不会很慢，尤其是只有 6 个对象。可能导致缓慢的是重新渲染。您是否同时在屏幕上显示所有购物车项目？您是否进行了性能测试并检查了渲染组件需要多长时间？

标签： reactjs typescript react-typescript

【解决方案1】：

经过一些调试和重构后，我稍微提高了性能，但这对我来说还不够。

正如我在可能的解决方案部分中提到的那样，解决方案是使用 Hooks 实现去抖动方法（感谢 Jacob Smith）。

这里有一个很好的 blog post 介绍如何创建该钩子

【讨论】：

【解决方案2】：

对于性能优化，您可以按照以下步骤操作：

去抖动：你已经提到了这个性能优化技术有关去抖动以及如何在反应中实现这一点的更多信息，您可以查看此
how to implement debouncing in react
what is debouncing and throttling
useCallback 钩子：你可以使用这个钩子来记忆你的函数。以便它可以保存一些结果以供将来参考。您可以阅读更多相关信息
more about useCallback
使用适当的数据结构：我们知道在对象数组中查找 id 需要 O(n) 次。我们可以将该数组转换为 Maps，以便在 O(1) 时间内我们可以识别要更新的对象，而且 Maps 本质上是迭代的，因此在您的情况下它将解决 Array 的目的。
注意：数据结构和架构在优化中发挥着重要作用，而不是像钩子和去抖动等花哨的技术。

【讨论】：