如何使用 useMemo 而不是使用 javascript 的本地状态并做出反应？答案

【问题标题】：How to use useMemo instead of a local state using javascript and react?如何使用 useMemo 而不是使用 javascript 的本地状态并做出反应？
【发布时间】：2022-01-11 07:11:21
【问题描述】：

我想使用 useMemo 而不是使用 javascript、react 和 graphql 的本地状态。

我想做什么？

我正在根据从进度查询中获取的数据显示进度条。从进度查询中获取的数据设置为状态。

下面是代码，

const ProgressModal = (status) => {
    const [progress, setProgress] = React.useState<>(undefined); //progress state 
    //setting
    
    const { data: progressData, stopPolling: stopPolling } = 
        useCheckProgressQuery({
            variables: {id},
            pollInterval: 3000,
        })
   
    React.useEffect(() => {
        if (status === initial) {
            setProgress(undefined);
        }
        if (status===started) {
            setProgress(progressData);
        }
        if (status === finished && completed >= total || status === failed) {
            stopPolling();
            setProgress(undefined);
        }
    }, [progress, progressData, setProgress]);

    const completed= progress
        ? progress.Progress.completed : 0;
    const total = progress ? progress.Progress.total : 0;
    let value = 0; 
    if (completed > 0 && total > 0) {
        value = (completed / total) * 100;
    }

    return (
        <ProgressBar value = {progress} />
    );
}

上面的代码有效，但我如何在上面的情况下使用 useMemo 而不是本地状态。有人可以帮我解决这个问题。我是使用反应钩子的新手。谢谢。

【问题讨论】：

这不是 useMemo 的用途。它用于缓存。使用 useState、useReducer 或 useRef 作为状态
这里用useMemo替换状态是没有意义的。您实际上是在尝试使用不断变化的记忆值重新创建状态功能。您本质上想要存储一个值，并在该值更改时重新渲染进度条。这正是 state 的用途。做一些谷歌搜索并查看useMemo 的示例和用例，可能会帮助您了解何时可以/需要使用它

标签： javascript reactjs graphql

【解决方案1】：

useMemo 和 useState 与 useEffect 做不同的事情，所以你不能将 useState/useEffect 100 % 平均转换为 useMemo。

一个或多或少等效的 useMemo 方法是这样的（但它不起作用，其他重构也是必要的，见下文）：

const progress = useMemo(() =>{
  if( status === initial ){
    return undefined;
  }
  if( status===started ){
    return progressData;
  }
  if( status === finished && completed >= total || status === failed ){
     return undefined);
  }
  return undefined; // <-- you need to define default/fallback
},
[ progressData, status, completed, total ] // <-- some where missing in your example
);

这不是一个可行的解决方案，需要更多重构：

这里例如stopPolling() 没有被调用，现在需要一个额外的useEffect。
progress 依赖于completed 和total，completed / total 都依赖于progress（循环依赖）

【讨论】：