如何使用钩子设置常量 'state' 变量？

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 是否会增加它）。

Answer 2

你真的不需要在状态上对其进行序列化，但让我们按照你的方法去做：

const MY_RATIO = 3
const SomeComponent = ({value}) =>{
    const [state, setter] = useState(value * MY_RATIO)
    useEffect(() =>{
        setter(value * MY_RATIO)
    }, [value, MY_RATIO])
}

现在你只在你的 prop value 改变时更新状态。但更好的方法是使用 useMemo

const memoizedValue = useMemo(() => MY_RATIO * value, [MY_RATIO, value])

Answer 3

看来你应该使用 useMemo 挂钩 https://reactjs.org/docs/hooks-reference.html#usememo

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

如何使用钩子设置常量 'state' 变量？

How to set a constant 'state' variable using hooks?

javascript

reactjs

react-hooks