扫码关注官方订阅号
此文说第二种写法要好于第一种写法,那两者除了访问方式不同之外,还有什么不同
此文链接https://github.com/yannickcr/...
人生最曼妙的风景,竟是内心的淡定与从容!
这个问题在React官方仓库的Issues里有说过,你可以去搜索一下。简单来说,两者在普通的用法上是没有什么区别的,但是在组件卸载时,用字符串形式的引用就难免产生其他问题。
假设这样一个情况:有一个富文本编辑器,在你的hello被挂载后,执行编辑器初始化,代码为
hello
componentDidMount() { mdeditor.init({ container: this.refs.hello }) }
这时你就能看到你的编辑器了,因为你的this.refs.hello是个真正存在的DOM元素。
this.refs.hello
DOM
然后,某个时刻,你的hello组件被卸载了。正常的情况下,当编辑器所挂载的元素不存在了,编辑器应该也被销毁。但是由于你的hello是字符串引用,你无法知道hello卸载的时机,所以无法知道何时执行mdeditor.destroy()这样的操作。
mdeditor.destroy()
那么改成ref={c => this.setHello(c)}呢?你可以在setHello(c)函数中顺利的执行编辑器的初始化和销毁。例如:
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 }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
这个问题在React官方仓库的Issues里有说过,你可以去搜索一下。简单来说,两者在普通的用法上是没有什么区别的,但是在组件卸载时,用字符串形式的引用就难免产生其他问题。
假设这样一个情况:有一个富文本编辑器,在你的
hello被挂载后,执行编辑器初始化,代码为这时你就能看到你的编辑器了,因为你的
this.refs.hello是个真正存在的DOM元素。然后,某个时刻,你的
hello组件被卸载了。正常的情况下,当编辑器所挂载的元素不存在了,编辑器应该也被销毁。但是由于你的hello是字符串引用,你无法知道hello卸载的时机,所以无法知道何时执行mdeditor.destroy()这样的操作。那么改成
ref={c => this.setHello(c)}呢?你可以在setHello(c)函数中顺利的执行编辑器的初始化和销毁。例如: