如何使用钩子设置常量“状态”变量？

Question

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

const SOME_CONSTANT_NUMBER = 50;

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

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

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

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

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

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

Answer 1

正是useMemo针对该用例。

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

请注意，它本身带有成本（它是另一个函数），因此只有当您知道计算该值确实成本高昂时才useMemo应该使用它，这意味着：导致滞后（如果不是，您应该真正检查性能，以及是否会增加它）。useMemo