javascript - React Functional Component - 在哪里存储从 Prop 计算的转换值

Question

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

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>;
}

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

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

Answer 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>;
    }