React中useRef结合useSelector使用的潜在问题及自定义Hook方案的疑虑

嘿，我来帮你梳理这个方案的潜在问题和风险哈！

首先得说，你的出发点特别合理——不想把组件和Redux强绑定，还想避免Context触发子组件不必要的重渲染，这个思路是很务实的。咱们来逐个分析你担心的点：

关于内存泄漏的风险 #

其实不用太担心内存泄漏的问题。useRef创建的引用是和组件实例的生命周期绑定的，当组件卸载后，这个ref对象会被JavaScript的垃圾回收机制处理掉，只要你不在组件卸载后还去异步访问dataRef.current（比如在延迟执行的setTimeout、未取消的网络请求回调里），就不会有内存泄漏的问题。

其他需要注意的潜在问题 #

虽然你的方案能正常运行，但还有几个细节需要留意：

• 不符合useSelector的使用规范：useSelector的回调函数期望你返回需要监听的状态片段，它会通过对比前后返回值来决定是否触发组件重渲染。但你的回调里没有返回值（默认返回undefined），这会让useSelector误以为状态从未变化，虽然当前能正常工作，但可能在Redux的未来版本或者严格的lint规则下出现问题。
• 异步操作中可能拿到过时状态：因为dataRef.current的更新不会触发组件重渲染，如果你在异步逻辑里访问它，可能会拿到旧的state值，甚至组件卸载后ref已经被回收，这时候访问可能会出问题。
• 状态变化无法触发视图更新：这是你刻意追求的，但要确保所有使用dataRef.current的场景都不需要响应状态变化来更新UI，否则这个方案就不适用了。

优化建议（更符合React规范的写法） #

如果你想保持核心逻辑不变，同时让代码更规范，可以改成用useEffect来更新ref，这样useSelector能正常履行它的职责：

export const useData = () => {
  const dataRef = React.useRef();
  // 正常监听整个state的变化
  const currentState = useSelector(state => state);

  React.useEffect(() => {
    // 当state变化时更新ref
    dataRef.current = currentState;
  }, [currentState]);

  return dataRef;
};

这个写法的好处是符合React钩子的使用规则，同时也能达到你用ref存储最新state的目的。不过要注意，这个写法会在state变化时让组件先重渲染一次，再更新ref——如果你完全不想让组件重渲染，那原方案可以继续用，但要接受它不符合规范的小瑕疵。

总的来说，你的方案核心逻辑是可行的，主要风险是异步场景下的过时状态和不符合规范的写法，内存泄漏的概率很低。

备注：内容来源于stack exchange，提问作者cyrus-d