关于React中useRef

ref有3种用法：

1. 字符串
   dom节点上使用，通过this.refs[refName]来引用真实的dom节点

<input ref="inputRef" /> //this.refs['inputRef']来访问

1. 回调函数
   React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

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

<input ref={(input) => {this.textInput = input;}} type="text" />   //HTML 元素添加 ref 属性时

<CustomInput ref={(input) => {this.textInput = input;}} />   //组件添加 ref 属性

1. React.createRef()
   在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性
   将能拿到dom节点或组件的实例

class Child extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}

(2)根据ref获取dom

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例，但可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点

var Parent = React.createClass({
  render: function(){
    return (
      <div className = 'parent'>
        <Child ref = 'child'/>
      </div>
    )
  },
  componentDidMount(){
    console.log(this.refs.child); // 访问挂载在组件上ref
    console.log(ReactDOM.findDOMNode(this.refs.child)); // 访问真正的dom节点
  }
})

var Child = React.createClass({
  render: function() {
    return (
        <div ref="test">
          <a ref="update">更新</a>
        </div>
    );
  }
});

(3)react-redux使用时利用ref调用子组件方法不可用报错

在使用react的时候，我们难免会在父组件中调用子组件的方法，我们常用ref调用子组件的方法

如下在父组件中调用子组件的写法

父组件

handleShowModalAdd = () => {
    this.add.handleToggle()//handleToggle为子组件中的方法
}

<SystemAdd ref={(el) => this.add = el}/>

但是当我们在子组件中使用redux的时候，由于使用connect对子组件进行了包装，会导致获取不到子组件中的方法

下面的是使用redux后的ref使用方法

父组件

handleShowModalAdd = () => {
    this.add.handleToggle()//handleToggle为子组件中的方法
}

<SystemAdd onRef={(ref) => this.add = ref }/>

子组件

componentDidMount(){
    this.props.onRef(this)//将组件实例this传递给onRef方法
}

 当然，在我们的函数式组件中的用法官方文档也做了演示

这里是去操作的dom