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
}