javascript - 如何使用钩子(Hook)设置常量 'state' 变量？

Question

假设我有一些状态变量width，并且我知道它永远不会改变，但我需要根据我收到的 Prop 对其进行一些计算。我不想在函数体内执行此操作，因为它将在每次重新渲染时运行。所以:

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(SOME_CONSTANT_NUMBER * multiplier);

  return (
    <div>
      {width}
    </div>
  );
}

现在我还实例化了一个我永远不会使用的函数setWidth。

我可以使用一个钩子(Hook)仅在安装时运行，但这需要更多代码，而且不是必需的。

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(0);

  useHook(() => {
    const updatedWidth = SOME_CONSTANT_NUMBER * multiplier;
    setWidth(updatedWidth);
  }, []);

  return (
    <div>
      {width}
    </div>
  );
}

我认为最糟糕的方法如下，因为它会在每次重新渲染时计算它:

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const width = SOME_CONSTANT_NUMBER * multiplier;
  return (
    <div>
      {width}
    </div>
  );
}

*注意这个例子很简单，但假设有更多的 Prop ，并且这个宽度的计算量很大。

Answer 1

有useMemo正是针对该用例。

 const width = useMemo(() => SOME_CONSTANT_NUMBER * multiplier, [multiplier]);

请注意，useMemo 本身带有成本(它是另一个函数)，因此只有当您知道计算该值确实成本很高时才应该使用它，意思是:导致滞后(如果不是，您应该真正检查性能，以及 useMemo 是否会提高性能)。