Question

如果你以前使用过 React，你可能会熟悉旧的 API，其中的 ref 属性是字符串，如 ref={'textInput'} ，并且 DOM 节点的访问方式为 this.refs.textInput 。我们建议不要这样做，因为字符串引用有以下问题，并且被认为是遗留问题。字符串 refs 在 React v16 版本中被移除。

1. 它们强制 React 跟踪当前执行的组件。这是有问题的，因为它使 React 模块有状态，这会导致在 bundle 中复制 React 模块时会导致奇怪的错误。
2. 它们是不可组合的 - 如果一个库把一个 ref 传给子元素，则用户无法对其设置另一个引用。
3. 它们不能与静态分析工具一起使用，如 Flow。Flow 无法猜测出 this.refs 上的字符串引用的作用及其类型。Callback refs 对静态分析更友好。
4. 使用 render callback 模式，它无法像大多数人预期的那样工作。

   class MyComponent extends Component {
     renderRow = (index) => {
       // This won't work. Ref will get attached to DataTable rather than MyComponent:
       return <input ref={'input-' + index} />;
   
       // This would work though! Callback refs are awesome.
       return <input ref={input => this['input-' + index] = input} />;
     }
   
     render() {
       return <DataTable data={this.props.data} renderRow={this.renderRow} />
     }
   }