react中大量使用ref会有问题吗?

发布于 09-12 23:13 字数 772 浏览 21 评论 0

首先要做一个低代码平台的框架,框架中有很多控件,这些控件就涉及到对外暴露接口,用就想通过对外暴露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);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

马蹄踏│碎落叶2022-09-19 23:13:40

并不会如果以是否会增加render次数来判断是否会有性能问题的话,组件传一个ref并不会增加render次数,你应该更关心内存泄漏的问题,如果把ref挂载到window上即使fiber树被销毁ref仍然存在

尛丟丟2022-09-19 23:13:40

还好 就是有些侵入子组件内部实现细节了

倾城°AllureLove2022-09-19 23:13:40

不会的,在React中性能问题一般是由不必要的渲染产生的,ref不会触发渲染

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文