Javascript 如何在引用更改时重新渲染

代码：

从“react mapbox gl draw”导入DrawControl；
导出默认函数MapboxGLMap（）{
设drawControl=null
返回(
{drawControl=drawControl}}/>
)
}

我想在

drawControl

不为空时加载数据。我检查可能使用callback ref的文档

---

那么，如何监听

drawControl

更改并加载数据呢？

如果要在ref更改后触发重新渲染，必须使用

useState

而不是

useRef

。只有这样才能确保组件将重新渲染。例如：

函数组件（）{
const[ref，setRef]=useState（）；
返回setRef（newRef）}/>
}

如文件中所述：

请记住，

useRef

的内容更改时不会通知您。更改

.current

属性不会导致重新渲染。如果要在React将引用附加或分离到DOM节点时运行某些代码，则可能需要使用

---

按照建议，有时最好存储从DOM节点获得的任何值，而不是存储节点本身。

useCallback可以侦听更改的引用

import DrawControl from "react-mapbox-gl-draw";

export default function MapboxGLMap() {
    let drawControl = null
    return(
      <DrawControl ref={DrawControl => {drawControl = DrawControl}}/>
    )
}

导出默认函数MapboxGLMap（）{
const drawControlRef=useCallback（节点=>{
如果（节点！==null）{
//获取（…）加载数据
}
},[]);
返回(
)
}

您可以根据

useRef

export default function MapboxGLMap() {
    const drawControlRef = useCallback(node => {
      if (node !== null) {
        //fetch(...)   load data
      }
    },[]);

    return(
      <DrawControl ref={drawControlRef }/>
    )
}

---

当ref被更新时，您需要重新渲染吗？或者它是否足以使用？按照您的方式，您不会以任何方式存储ref。您必须使用一些钩子来存储它、类组件或组件外部的对象（例如存储）。感谢您的建议，我尝试了您的代码，但它一直重复重新渲染。我需要在ref更新时重新渲染。我想回叫裁判可能会帮我。但是我不知道怎么做谢谢，我用回调ref来解决我的问题。@YangYun，你能在codesandbox中重现重新渲染循环吗？我试过了，但没有发生。问题是，有时你必须使用ref。在什么情况下你需要使用ref？可以将元素存储在

useState

中，并在每次渲染过程中将其写入

ref.current

以同时获取这两个元素。例如，如果您希望ref在不依赖于钩子的情况下可访问，同时在元素更改时强制重新渲染，则此方法非常有用。对我来说非常有效

   function useEffectOnce(cb) {

        const didRun = useRef(false);
        useEffect(() => {
            if(!didRun.current) {
                cb();
                didRun.current = true
            }
        })
    }