javascript - react组件的ref为固定值和回调函数的区别
黄舟
黄舟 2017-04-11 11:56:11
[JavaScript讨论组]

此文说第二种写法要好于第一种写法,那两者除了访问方式不同之外,还有什么不同

此文链接
https://github.com/yannickcr/...

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
高洛峰

这个问题在React官方仓库的Issues里有说过,你可以去搜索一下。简单来说,两者在普通的用法上是没有什么区别的,但是在组件卸载时,用字符串形式的引用就难免产生其他问题。

假设这样一个情况:有一个富文本编辑器,在你的hello被挂载后,执行编辑器初始化,代码为

componentDidMount() {
    mdeditor.init({
        container: this.refs.hello
    })
}

这时你就能看到你的编辑器了,因为你的this.refs.hello是个真正存在的DOM元素。

然后,某个时刻,你的hello组件被卸载了。正常的情况下,当编辑器所挂载的元素不存在了,编辑器应该也被销毁。但是由于你的hello是字符串引用,你无法知道hello卸载的时机,所以无法知道何时执行mdeditor.destroy()这样的操作。

那么改成ref={c => this.setHello(c)}呢?你可以在setHello(c)函数中顺利的执行编辑器的初始化和销毁。例如:

setHello(c) {
    // 挂载时, c被React设置为DOM元素
    if (c) {
        mdeditor.init({
            container: c
        })
    } // 卸载时,c被React设置为null
    else {
        mdeditor.destroy()
    }
    this.hello = c
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号