react 中的 ref={callback} 和 ref = "myInput" 有什么区别？

Question

作为链接https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

然后它只给出了一个立即使用该组件的例子。我正在尝试找出如何使用此功能立即访问组件，并保存组件以供将来使用，正如它所说的我们能够做到的那样。

Answer 1

不同之处在于使用 ref={callback} react 将管理参考存储的责任转交给您。当您使用 ref="sometext" 时，在幕后 react 必须在您的类上创建一个 refs 属性，然后将所有 ref="sometext" 语句添加到它。

虽然有一个简单的 this.refs.sometext 访问组件很好，但在组件被销毁时清理这个 refs 属性在反应方面很困难且容易出错。 react 将组件传递给您并让您处理是否存储它要容易得多。

根据反应文档

React 会在 DOM 元素调用 ref 回调时 组件挂载，并在卸载时使用 null 调用它。

这实际上是一个非常巧妙的想法，通过在卸载时传递 null 并再次调用您的回调，您会自动清理引用。

要真正使用它，您只需从任何函数访问它，如下所示：

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in this.textInput.
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

您在 ref 上设置的回调将接收组件作为第一个参数，在此示例中，“this”单词将是当前类“CustomTextInput”。在回调中设置 this.textInput 将使 textInput 可用于所有其他函数，例如 focus()

具体例子

来自 Dan Abermov 的Tweet 展示了 ref 回调工作得更好的案例

更新

每个 Facebook Docs 使用字符串作为 refs 被认为是遗留问题，他们“建议使用回调模式或 createRef API 代替。”

Answer 2

当您分配 ref={callback} 之类的 <input type="text" ref={(input) => {this.textInput = input}}/> 时，基本上您所做的是保存名称为 textInput 的 ref 以供将来使用。因此，我们可以使用回调方法，而不是使用ref="myInput"，然后使用this.refs.myInput，然后像this.textInput 一样访问组件。

这是一个同样的演示，我们在button click 上使用ref 访问input value

class App extends React.Component {
  constructor(){
    super();
  }
  handleClick = () => {
    console.log(this.textInput.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => {this.textInput = input}}/>
        <button type="button" onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.4/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

使用 React 16.3，您可以改用 React.createRef() API：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}