useMountedRef 如果使用 useState 代替 useRef 为什么会一直显示加载中

来源：10-1 useCallback应用，优化异步请求

weibo_我叫风中追风13_0

2021-02-26

声明 useMountedRef 的 diff

export const useMountedRef = () => {
-  const mountedRef = useRef(false);
+  const [mounted, setMounted] = useState(false);

  useEffect(() => {
-    mountedRef.current = true;
+    setMounted(true)
     return () => {
-      mountedRef.current = false;
+      setMounted(false)
     };
  });

-  return mountedRef;
+  return mounted; 
};

使用 useMountedRef 的 diff

- const mountedRef = useMountedRef();
+ const mounted = useMountedRef();
...

- if (mountedRef.current) setData(data);
+ if (mounted) setData(data);

老师，假设我使用 useState 代替 useRef ，会显示一直加载 ui，但是我不明白为什么会这样，麻烦老师解答一下下

写回答

1回答

Nolan

2021-02-27

用useState的话，就对依赖的准确性要求比较高了，

找到 auth-context，把

  useMount(() => {
    run(bootstrapUser());
  });

改成

  useEffect(() => {
    run(bootstrapUser());
  }, [run]);

就可以了

话说通过这里的例子发现useMount是有个缺点的，那就是如果少了依赖eslint不会提示..

React17+Hook+TS4 优质实践，仿 Jira 企业级项目

解锁 React17 高阶用法，轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程

相似问题

为什么用useRef而不是useState啊？

回答 1

老师，数组和对象作为依赖是不是不太好，不管这个数组和对象是不是 useState里申明的

回答 3

老师为什么要用useState设置value呢，直接复制一个不行吗

回答 1

useAsync中Run函数参数中Promise的类型问题

回答 1

老师, 为什么本组件的useState 无法保存 oldTitle的状态

回答 1

打开慕课网App查看更多内容