Reactjs 为什么ref='；字符串'；是"；遗产；？

在React文档中，他们说：

React还支持在任何组件上使用字符串（而不是回调）作为ref-prop，尽管这种方法在这一点上主要是传统的

以以下为例：

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref={input => (this._input = input)} />;
  }
  action() {
    console.log(this._input.value);
  }
}

类Foo扩展组件{
render（）{
返回this.action（）}ref={input=>（this.\u input=input）}/>；
}
行动（）{
console.log（这个输入值）；
}
}

为什么我更喜欢这个，而不是：

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref='input' />;
  }
  action() {
    console.log(this.refs.input.value);
  }
}

类Foo扩展组件{
render（）{
返回此.action（）}ref='input'/>；
}
行动（）{
console.log（this.refs.input.value）；
}
}

?

第二个例子看起来更干净更简单。
字符串方法是否存在被弃用的风险

---

NB：我在寻找文档中声明的“官方”答案，我不是在询问个人偏好等等。

虽然可能更简单，但旧的refs API在某些边缘情况下可能会变得困难，比如在回调中使用时。所有类型的静态分析对字符串也是一种痛苦。基于回调的API可以做字符串API所能做的一切，而且只需增加一点细节

class Repeat extends React.Component {
  render() {
    return <ul> {
      [...Array(+this.props.times)].map((_, i) => {
        return <li key={i}> { this.props.template(i)    } </li>
      })
    } </ul>
  }
}

class Hello extends React.Component {
  constructor() {
    super();
    this.refDict = {};
  }

  render() {
    return <Repeat times="3" template={i => <span ref= {el => this.refDict[i] = el}> Hello {i} </span>} />
           {/*                                    ^^^ Try doing this with the string API          */}
  }
}

类重复扩展React.Component{
render（）{
返回
{
[…数组（+this.props.times）].map（（（uu，i）=>{
return
{this.props.template（i）}
})
}
}
}
类Hello扩展了React.Component{
构造函数（）{
超级（）；
this.refDict={}；
}
render（）{
返回这个.refDict[i]=el}>Hello{i}/>
{/*^^^尝试使用字符串API*/}
}
}

关于基于字符串的api可能存在的问题的进一步讨论和更全面的列表，可以从中找到，其中介绍了基于回调的api。我将在这里包括问题描述中的列表：

ref API在几个方面被破坏

• 您必须将此.refs['myname']作为字符串引用，才能与闭包编译器高级模式兼容

• 它不允许一个实例有多个所有者的概念

• 神奇的动态字符串可能会破坏VM中的优化

• 它需要始终保持一致，因为它是同步解决的。这意味着渲染的异步批处理会引入潜在的bug

• 我们目前有一个钩子来获取兄弟引用，这样您就可以让一个组件引用它的兄弟作为上下文引用。这只适用于一个级别。这破坏了将其中一个封装在封装中的能力

• 它不能是静态类型的。您必须在任何语言（如TypeScript）中使用它

• 在子级调用的回调中，无法将ref附加到正确的“owner”<代码>{index}}/>——此引用将附加在发出回调的位置，而不是当前所有者中

---

---

文档将旧的字符串API称为“legacy”，以便更清楚地表明基于回调的API是首选方法，正如中所讨论的，其中实际上是将这些语句放在文档中的。还请注意，一些注释暗示基于字符串的refs api可能会在某个时候被弃用。

最初由danabramov在

字符串引用不可组合。如果包装组件已经有一个现有的字符串引用，则它不能“窥探”子级的引用。另一方面，回调引用没有单一的所有者，因此您可以始终组合它们

字符串引用不适用于流这样的静态分析。Flow猜不出框架在

this.refs

上使字符串ref“出现”的魔力，以及它的类型（可能不同）。回调引用对静态分析更友好

字符串引用的所有者由当前执行的组件确定。这意味着，使用常见的“渲染回调”模式（例如，

），错误的组件将拥有ref（它将在

数据表

上结束，而不是在定义

渲染箭头

的组件上结束）

字符串引用强制作出反应以跟踪当前正在执行的组件。这是有问题的，因为它使

react

模块有状态，因此当

react

模块在捆绑包中重复时会导致奇怪的错误

---

这可能与此有关吗？i、 e.将ref所有权从母公司分离？还有其他的好处，但我认为这可能是他们最初的理由？嗯，这里有更多的阅读：我想知道你是否可以补充一点，内联回调是一种不推荐的性能影响？或者我在这里读到@GreenAsJade，这个例子有很多我不会在生产代码上做的事情，但是因为重点是演示一个使用字符串API很难实现的模式，所以我不会太担心它。此外，我怀疑这几毫秒的额外时间是否会成为任何人的性能瓶颈，除非他们有数千个这样的组件。