react组件的ref为固定值和回调函数的区别

Question

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

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

Answer 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 }