javascript - react组件的ref为固定值和回调函数的区别
本文介绍了javascript - react组件的ref为固定值和回调函数的区别的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
此文说第二种写法要好于第一种写法,那两者除了访问方式不同之外,还有什么不同
此文链接
https://github.com/yannickcr/...
解决方案
这个问题在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
}
这篇关于javascript - react组件的ref为固定值和回调函数的区别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文