react中ref

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

 

 某些情况下需要直接修改元素，要修改的子代可以是 React 组件实例，也可以是 DOM 元素。这时就要用到refs来操作DOM。
[注意] 如果可以通过声明式实现，则尽量避免使用 refs。

ref

  React 支持给任意组件添加特殊属性ref ，ref可以是一个字符串，也可以是一个属性接受一个回调函数，它在组件被加载或卸载时会立即执行。
[注意]在组件mount之后再去获取ref。componentWillMount和第一次render时都获取不到，在componentDidMount才能获取到。

新ref

  版本16.3 之前，React 有两种提供 ref的方式：字符串和回调，因为字符串的方式有些问题，所以官方建议使用回调来使用 ref。而现在引入的createRef API，据官方说是一种零缺点的使用ref的方式，回调方式也可以让让路了。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

  然后使用current属性，即可获得当前元素

this.myRef.current

[注意]使用styledComponents样式化的元素暴露的接口是innerRef，而不是ref

<Wrap innerRef={this.itemRef}>

ref传递原理

  当给 HTML 元素添加ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
  React 组件在加载时将 DOM 元素传入 ref 的回调函数，在卸载时则会传入 null。ref 回调会在componentDidMount或 componentDidUpdate这些生命周期回调之前执行。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

更简短的写法如下：

ref={input => this.textInput = input}

类组件

  当·ref属性用于使用 class声明的自定义组件时，ref的回调接收的是已经加载的 React 实例。

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focusTextInput();
  }

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

[注意]这种方法仅对 class 声明的 CustomTextInput有效

函数式组件

不能在函数式组件上使用 ref 属性，因为它们没有实例。

对父组件暴露DOM节点

  在子节点上暴露一个特殊的属性。子节点将会获得一个函数属性，并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点。
该方法适用于类组件和函数式组件:

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

  在上面的例子中，Parent 将它的 ref 回调作为一个特殊的 inputRef 传递给CustomTextInput，然后 CustomTextInput 通过ref 属性将其传递给 <input>。最终，Parent 中的 this.inputElement将被设置为与 CustomTextInput中的<input>元素相对应的 DOM 节点。

 

 

作者：我命由我yes
链接：https://www.jianshu.com/p/628d5514b145
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。