V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FaiChou
V2EX  ›  React

React 中, 为什么要用 useRef() 而不直接用一个外部变量?

  •  
  •   FaiChou ·
    FaiChou · 2022-05-06 14:02:28 +08:00 · 2294 次点击
    这是一个创建于 969 天前的主题,其中的信息可能已经有所发展或是发生改变。

    除了绑定 DOM, 发现直接找一个外部变量替代 useRef() 更方便呀? 比如:

    例子 1:

    function Timer() {
      const intervalRef = useRef();
      useEffect(() => {
        const id = setInterval(() => {
          // ...
        });
        intervalRef.current = id;
        return () => {
          clearInterval(intervalRef.current);
        };
      });
      // ...
    }
    

    替换成:

    let _interval = null;
    function Timer() {
      useEffect(() => {
        const id = setInterval(() => {
          // ...
        });
        _interval = id;
        return () => {
          clearInterval(_interval);
        };
      });
      // ...
    }
    

    例子 2:

    function usePrevious(val) {
      const r = useRef();
      useEffect(() => r.current = val);
      return r.current;
    }
    

    替换成:

    let _p = null;
    function usePrevious(val) {
      useEffect(() => _p = val);
      return _p;
    }
    
    dengqing
        1
    dengqing  
       2022-05-06 14:05:38 +08:00   ❤️ 2
    有没有想过组件会在多个地方使用?
    shakukansp
        2
    shakukansp  
       2022-05-06 14:06:34 +08:00
    那你一个组件里要调 1 万个 timer 呢
    ruxuan1306
        3
    ruxuan1306  
       2022-05-06 14:09:29 +08:00
    我猜你家喜欢在楼道换鞋
    FaiChou
        4
    FaiChou  
    OP
       2022-05-06 14:11:31 +08:00
    @dengqing 哈哈 没考虑到 我没怎么写过项目 偶然想到这个问题
    westoy
        5
    westoy  
       2022-05-06 14:11:56 +08:00
    你不怕你写嗨了在外部变量域把这个变量一把梭哈了啊

    global variables are evil 啊
    FaiChou
        6
    FaiChou  
    OP
       2022-05-06 14:14:03 +08:00
    @shakukansp 本来想实现一个函数 getAPublicVal() 每次调用来返回一个外部变量, 当相同 component 调用时候返回之前的外部变量. 这时候发现实现了一个 useState ..
    gogogo1203
        7
    gogogo1203  
       2022-05-06 14:55:29 +08:00
    @shakukansp 理论上不存在, React 不推荐超过三百个 DOM Elements.
    shakukansp
        8
    shakukansp  
       2022-05-06 15:00:39 +08:00
    @gogogo1203
    1 万个和 2 个是一样的,只要一个组件内需要多次调用 timer,那么就不能用全局变量
    是这意思,和有多少 dom 没关系
    gogogo1203
        9
    gogogo1203  
       2022-05-06 15:03:25 +08:00
    <><Timer/><Timer/></> 你就知道错了.
    gogogo1203
        10
    gogogo1203  
       2022-05-06 15:04:33 +08:00
    @shakukansp 理解了, 我也想表达这个意思。
    dany813
        11
    dany813  
       2022-05-06 16:35:55 +08:00
    全局变量危险啊,万一在其他更改了呢
    gogogo1203
        12
    gogogo1203  
       2022-05-06 16:58:55 +08:00
    还有一个问题就是 stale closure
    DKrookie
        13
    DKrookie  
       2022-05-06 17:40:45 +08:00
    虽然但是,我还是想说定义在组件外部并不是全局变量吧,模块化了除非显示的使用 window. 来定义变量,好像没法定义全局变量吧。
    FaiChou
        14
    FaiChou  
    OP
       2022-05-06 21:39:08 +08:00
    @DKrookie 这要看打包工具吧.
    yazoox
        15
    yazoox  
       2022-05-07 08:53:06 +08:00
    @gogogo1203 有什么方法统计出来,当前打开的页面,项目中有多少个 DOM?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   979 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:04 · PVG 05:04 · LAX 13:04 · JFK 16:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.