React 功能组件 - 存储从 props 计算的转换值的位置

Posted 2023-02-22

【中文标题】React 功能组件 - 存储从 props 计算的转换值的位置

【英文标题】：React Functional Component - Where to store transformed value calculated from props

【发布时间】：2021-12-13 02:34:12

【问题描述】：

假设我有以下繁重的计算功能：

function heavyCalculator(str:string):string
  //Do some heavy calculation
  return result;

function SomeComponent(prop1,prop2,prop3,prop4:Props)
  useEffect(()=>
    const result = heavyCalculator(prop3);
    //How should i store the result?
  ,[prop3])
  return <span>resultFromHeavyCalculation</span>;

我应该如何以不会在每次渲染/道具更改时重新计算的方式存储计算结果？

我应该使用“useMemo”还是使用“useState”并仅在prop3更改时将其设置在“useEffect”中？

【问题讨论】：

是的，您可以使用 useState 来保存结果。如果 prop3 发生变化，则结果将再次重新计算并更新结果状态。

我觉得你需要useContext钩子

只需要useMemo，不需要useEffect。 useMemo 还需要一个基于它的值数组，应该重新运行。因此，除非您更改其中之一，否则不会重新计算该值。

@demark-pro 为什么这里需要 useContext 挂钩？这里没有道具练习，否则其他组件也不会使用此结果。每个 prop3 更改结果都将在此处重新计算。所以 useState 足以保存结果。

const resultFromHeavyCalculation = useMemo(() => heavyCalculator(prop3), [prop3]);

【参考方案1】：

这基本上是useMemo 的主要用例。尽管如果您将结果存储在 useState 变量中，您使用 useEffect(() => ..., [prop3]) 的方法也可以使用，但 useMemo 需要的样板文件更少：

function SomeComponent(prop1,prop2,prop3,prop4:Props)
  const resultFromheavyCalculation = useMemo(() => heavyCalculator(prop3), [prop3])
  return <span>resultFromHeavyCalculation</span>;

您可以了解有关useMemo in the official documentation 的更多信息。那里的示例实际上与您提供的示例非常相似。

如果你真的决定不惜一切代价避免useMemo，答案是：

    function SomeComponent(prop1,prop2,prop3,prop4:Props)
      const [resultFromHeavyCalculation, setResultFromHeavyCalculation] = useState();
      useEffect(()=>
          const result = heavyCalculator(prop3);
          setResultFromHeavyCalculation(result);
      ,[prop3]), [prop3])
      return <span>resultFromHeavyCalculation</span>;