Javascript 你能在上下文改变后不改变ref吗？反应

我有一个组件，它是一个上下文消费者，根据刷卡引起的上下文更改来更改文本内容

我认为最好的处理方法是将滑动逻辑（附加侦听器并根据滑动结果设置上下文）提取到自定义挂钩中，然后使用useffect中设置的滑动目标的引用调用该挂钩

const [node, setNode] = useState();

const ref = useRef();

useEffect(() => {
    setNode(ref.current);
  }, []);

useSwiping(node); // custom hook

return (
<section ref={ref}>
      <h1>
        {text content provided by context}
      </h1>
</section>
);

const[node，setNode]=useState（）；
const ref=useRef（）；
useffect（（）=>{
设置节点（参考电流）；
}, []);
使用滑动（节点）；//定制挂钩
返回(
{上下文提供的文本内容}
);

我面临的问题是，上下文更改强制重新渲染，这会创建新的引用，并导致每次我希望滑动目标中的文本更改时，我的挂钩都会被调用一个新的引用

有没有一种方法可以在每次上下文更改时都不删除和重新添加侦听器的情况下完成此操作？

您可以使用a来删除ref：

const [node, setNode] = useState();

useSwiping(node); // custom hook

return (
  <section ref={ref => setNode(ref)}>

  </section>
);

---

当希望执行时，是否可以尝试将该条件作为第二个参数提供给useEffect（）？在上下文更改后仍会调用自定义挂钩。不过看起来干净多了。是的，当然。这就是React的工作原理。你的自定义钩子应该使用

useffect

。如果你想只附加

ref

一次，你可以像这样使用

ref={ref=>！node？setRef（ref）：null}

三元运算符，因为在开始时，它会导致无限循环！节点从useState（）计算为true，并且还没有要将其设置为的ref。定制钩子中的useEffect似乎是钩子中几个更改后的答案。在写这个问题之前，我甚至试过一次，但我把依赖项数组留空，以为它只是为了更改，但它第一次也检查了它。谢谢你的帮助！

 useEffect(() => {
   if(ref) {
     //...
   }
 }, [ref]);