学习小结：react基础，获取ref的三代方式

我将以三代ref的获取方式来实现一个点击按钮就会弹窗显示input输入的内容

 

第一代：以字符串的方式获取：

class Demo extends React.Component {
  render() {
    return (
      <div>
        <input type="text" ref="input" />  // 在虚拟dom上以  ref=??? 的方式添加
        <button onClick={this.show}>点击弹窗</button> //给按钮添加点击事件，目的是弹出input的内容
      </div>
    );
  }
  show = () => {
    alert(this.refs.input.value);  // 在点击时以 this.refs.?? 获取ref保存的dom
  };
}


ReactDOM.render(<Demo />, document.getElementById("app"));

这种是最原始的方式，以将dom保存在实例下的refs这个属性内，react不推荐这么做，不过好像vue现在还是这个$ref的方式

第二代：回调函数

class Demo extends React.Component {
  state = {};
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(x) => {
            this.input = x; // 通过回调函数的方式将dom保存在实例下的input(自由取名)属性中
          }}
        />
        <button onClick={this.show}>点击弹窗</button> //添加点击事件
      </div>
    );
  }
  show = () => {
    alert(this.input.value); //以 this.??? 的方式获取input这个dom元素
  };
}

ReactDOM.render(<Demo />, document.getElementById("app"));

这种是第二代回调函数的方式，以将dom保存在实例下的自定义属性内，react也不推荐这么做

第三代：

class Demo extends React.Component {
  state = {};
  container = React.createRef();

  render() {
    return (
      <div>
        <input type="text" ref={this.container} />
        <button onClick={this.show}>点击弹窗</button>
      </div>
    );
  }
  show = () => {
    alert(this.container.current.value);
  };

}
ReactDOM.render(<Demo />, document.getElementById("app"));

使用React.createRef这个方法创建一个容器，在ref的属性值填入，就可以通过this.container.current获取到dom元素，其中container是可以自由起名的，react推荐这种方法

但是总的来说，尽量还是少用refs，因为把大量的dom缓存在容器中也是比较消耗性能的