react中大量使用ref会有问题吗?
首先要做一个低代码平台的框架,框架中有很多控件,这些控件就涉及到对外暴露接口,用就想通过对外暴露ref的方式,来实现外部调用主键内部的方法? 会有性能问题或其他问题吗?
或者还有其他对外暴露的好的方法吗?
我控件每渲染一次就会产生一个ref
//伪代码
// 控件
function Text(props, ref){
const [value, setValue] = useState();
// 对外暴露方法
useImperativeHandle(ref, {
setValue: (value) => {
setValue(value)
},
getValue: () => {
retrun value
}
}, [valuse]);
return <input type="text" value={{value}} >
}
forwardRef(Text);
// App挂载
funtion App () {
window.inputRef = useRef(null);
window.inputRef2 = useRef(null);
return (
<>
<Text ref={inputRef} />
<Text ref={inputRef2} />
</>
)
}
// 外部调用接口
window.inputRef.current.setValue(1);
并不会如果以是否会增加render次数来判断是否会有性能问题的话,组件传一个ref并不会增加render次数,你应该更关心内存泄漏的问题,如果把ref挂载到window上即使fiber树被销毁ref仍然存在