React Refs的使用方法、适用场景及实例参数疑问

嘿，我完全懂你刚学React refs时的困惑！当初我第一次看官方示例的时候也卡在这里过😉

先还原下官方示例的核心代码（方便对照） #

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;

    // 就是这个函数里的(input)让你疑惑对吧？
    this.setTextInputRef = (input) => {
      this.textInput = input;
    };
  }

  render() {
    return <input ref={this.setTextInputRef} />;
  }
}

为什么参数是(input)？其实核心是这几点： #

• 首先，这个回调函数是React主动帮你调用的！当组件渲染出<input>对应的真实DOM元素时，React会自动把这个DOM节点作为参数，传递给你写的ref回调函数。
• 你写的(input)只是个形参名字而已！你完全可以改成(element)、(myInput)甚至(foo)，本质都是接收React传过来的DOM实例。比如改成这样也完全能用：

this.setTextInputRef = (myElement) => {
  this.textInput = myElement;
};

• 额外补充个细节：当组件卸载时，React还会再次调用这个回调函数，不过这次传递的参数是null——这是为了让你及时清理引用，避免内存泄漏，这也是官方推荐用回调函数式ref的原因之一。

再提个常见的简化写法 #

你可能还会看到把箭头函数直接内联在ref属性里的写法，比如：

<input ref={(input) => this.textInput = input} />

这里的(input)同样是React传递过来的DOM元素，和类方法写法的逻辑完全一致，只是把函数直接写在属性里了而已。

总结一下：这个参数是React“递”给你的真实DOM引用，你给它起什么名字都无所谓，只要在函数里把它存到你需要的地方（比如类属性this.textInput），就能在后续代码里操作这个DOM元素啦～

内容的提问来源于stack exchange，提问作者Yone