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

[FaiChou]

除了绑定 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]

有没有想过组件会在多个地方使用？

[shakukansp]

那你一个组件里要调 1 万个 timer 呢

[ruxuan1306]

我猜你家喜欢在楼道换鞋

[FaiChou]

@dengqing 哈哈 没考虑到 我没怎么写过项目 偶然想到这个问题

[westoy]

你不怕你写嗨了在外部变量域把这个变量一把梭哈了啊

global variables are evil 啊

[FaiChou]

@shakukansp 本来想实现一个函数 getAPublicVal() 每次调用来返回一个外部变量, 当相同 component 调用时候返回之前的外部变量. 这时候发现实现了一个 useState ..

[gogogo1203]

@shakukansp 理论上不存在, React 不推荐超过三百个 DOM Elements.

[shakukansp]

@gogogo1203
1 万个和 2 个是一样的，只要一个组件内需要多次调用 timer,那么就不能用全局变量
是这意思，和有多少 dom 没关系

[gogogo1203]

<><Timer/><Timer/></> 你就知道错了.

[gogogo1203]

@shakukansp 理解了， 我也想表达这个意思。

[dany813]

全局变量危险啊，万一在其他更改了呢

[gogogo1203]

还有一个问题就是 stale closure

[DKrookie]

虽然但是，我还是想说定义在组件外部并不是全局变量吧，模块化了除非显示的使用 window. 来定义变量，好像没法定义全局变量吧。

[FaiChou]

@DKrookie 这要看打包工具吧.

[yazoox]

@gogogo1203 有什么方法统计出来，当前打开的页面，项目中有多少个 DOM?