Question

比方说，我有一些状态变量try_request()，我知道它永远不会改变，但是我需要根据收到的道具对它进行一些计算。我不想在函数主体中执行此操作，因为它将在每次重新渲染时运行。所以：

width

现在，我还实例化了一个我将永远不会使用的函数const SOME_CONSTANT_NUMBER = 50; const someFunc = ({multiplier: number}) => { const [width, setWidth] = useState(SOME_CONSTANT_NUMBER * multiplier); return ( <div> {width} </div> ); }。

我可以使用钩子仅在mount上运行，但这是更多的代码，而不是必需的。

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> ); }的计算量很大。

Answer 1

该用例有useMemo。

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

请注意，useMemo本身带有成本（这是另一个函数），因此只有在知道计算值非常昂贵的情况下，才应使用它。您应该检查一下性能，然后useMemo会提高性能）。

Answer 2

似乎您应该使用useMemo钩子https://reactjs.org/docs/hooks-reference.html#usememo

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

Answer 3

您实际上并不需要在州上对它进行细读，但是让我们遵循您的方法：

s.length() > 3

现在，您仅在道具const MY_RATIO = 3 const SomeComponent = ({value}) =>{ const [state, setter] = useState(value * MY_RATIO) useEffect(() =>{ setter(value * MY_RATIO) }, [value, MY_RATIO]) }更改时更新状态。但是更好的方法是使用value

useMemo

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

3 个答案: