码迷,mamicode.com
首页 > 其他好文 > 详细

refs之新旧差异

时间:2019-03-25 01:13:47      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:bsp   hand   组件   this   bind   OLE   实例   挂载   react   

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官网........

 

refs之新旧差异

标签:bsp   hand   组件   this   bind   OLE   实例   挂载   react   

原文地址:https://www.cnblogs.com/liangfc/p/10591452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!