代码：
import DrawControl from "react-mapbox-gl-draw";
export default function MapboxGLMap() {
let drawControl = null
return(
<DrawControl ref={DrawControl => {drawControl = DrawControl}}/>
)
}
我想在drawControl非空时加载数据。我检查了可能使用回调引用的文档。
那么，我如何监听drawControl更改并加载数据？
如果要在 ref 更改后触发重新渲染，则必须使用useState代替useRef。只有这样才能确保组件会重新渲染。例如：
function Component() {
const [ref, setRef] = useState();
return <div ref={newRef => setRef(newRef)} />
}
如useRef文档中所述：
请记住，当其内容更改时
useRef不会通知您。改变.current属性不会导致重新渲染。如果您想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能需要改用回调 ref。
有时可能更好地存储任何值，你从DOM节点获得，如建议在这里，而不是存储节点本身。
useCallback 可以监听 ref 更改
export default function MapboxGLMap() {
const drawControlRef = useCallback(node => {
if (node !== null) {
//fetch(...) load data
}
},[]);
return(
<DrawControl ref={drawControlRef }/>
)
}
虽然组件不会重新渲染，useEffect但会在current填充后接收 ref 。因此，虽然标记的答案也是正确的，但它不是惯用的方法，因为在将 ref 设置为 state 时会导致 1 次不必要的渲染。
export default function MapboxGLMap() {
const drawControlRef = useRef(null)
useEffect(() => {
// This has a value now.
console.log(drawControlRef.current)
}, [])
return(
<DrawControl ref={drawControlRef} />
)
}
如果您希望将 ref 传递给自定义钩子，则使用drawControlRef而不是drawControlRef.current，然后您也可以访问其中drawControlRef.current的useEffect钩子中的填充。
您可以使用useEffect基于变化的回调函数useRef
function useEffectOnce(cb) {
const didRun = useRef(false);
useEffect(() => {
if(!didRun.current) {
cb();
didRun.current = true
}
})
}