refs之新旧差异

Posted 2021-02-14 liangfc

Refs是什么?

官方:Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素。

16.3版本-Refs

使用方式:

　　1.首先使用React.createRef()创建refs

　　2.使用ref属性获取React元素(一般赋予在虚拟DOM上);

　　设置Refs

    class MyComponent extends React.Component{
            constructor(props){
                super(props);
                this.ele = React.createRef();
                this.showRef=this.showRef.bind(this);

            }
            showRef(){
                console.log(‘访问refs中的值‘,this.ele.current)
            }
            render(){
                return (
                    <div>
                        <input type="text" ref={this.ele} onChange={this.showRef}></input>
                    </div>
                )
            }
        }
// {current:input} input 是DOM元素

 

访问Refs

官方:const node = this.myRef.current;

ref的值取决于节点的类型:

• 当 ref 属性被用于一个普通的 html 元素时，React.createRef() 将接收底层 DOM 元素作为它的 current 属性以创建 ref 。
• 当 ref 属性被用于一个自定义类组件时，ref 对象将接收该组件已挂载的实例作为它的 current 。
• 你不能在函数式组件上使用 ref 属性，因为它们没有实例

普通的HTML元素:
class CustomTextInput extends React.Component {
          constructor(props) {
            super(props);
            // 创建 ref 存储 textInput DOM 元素
            this.textInput = React.createRef();
            this.focusTextInput = this.focusTextInput.bind(this);
          }
        
          focusTextInput() {
            // 直接使用原生 API 使 text 输入框获得焦点
            // 注意：通过 "current" 取得 DOM 节点
            this.textInput.current.focus();
          }
        
          render() {
            // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
            return (
              <div>
                <input
                  type="text"
                  ref={this.textInput} />
        
                  
                <input
                  type="button"
                  value="Focus the text input"
                  onClick={this.focusTextInput}
                />
              </div>
            );
          }
        }

为类组件增加ref
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}

函数式组件-Refs(组件没有实例-不能使用)

function MyFunctionalComponent() {
  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // 这将 *不会* 工作！
    return (
      <MyFunctionalComponent ref={this.textInput} />
    );
  }
}

函数式组件-Refs(组件内部可以使用）

function CustomTextInput(props) {
  // 这里必须声明 textInput，这样 ref 回调才可以引用它
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

回调 Refs(主流) 类似于↑

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // 直接使用原生 API 使 text 输入框获得焦点
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 渲染后文本框自动获得焦点
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
    // 实例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

注意

如果 ref 回调以内联函数的方式定义，在更新期间它会被调用两次，第一次参数是 null ，之后参数是 DOM 元素。这是因为在每次渲染中都会创建一个新的函数实例。因此，React 需要清理旧的 ref 并且设置新的。通过将 ref 的回调函数定义成类的绑定函数的方式可以避免上述问题，但是大多数情况下无关紧要。

其实就是搬运的React官网........