React-Refs的使用

Refs的使用

（详情参考官网 Refs & DOM）
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。
也就是说，Refs其实是提供了一个对真实DOM（组件）的引用，我们可以通过这个引用直接去操作DOM（组件）

一、什么时候使用Refs

下面是几个适合使用 refs 的情况：

1.管理焦点，文本选择或媒体播放。
2.触发强制动画。
3.集成第三方 DOM 库。

二、如何使用Refs

1.在类组件上使用Refs

（16.3版本中Refs通过React.createRef()的方法创建，通过ref属性关联）
当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>666</div>;
  }
  componentDidMount(){
    console.log(this.myRef.current); // 
666
    //render之后就可以输出该ref指向的那个节点
  }
}

ref 的值根据节点的类型而有所不同：
（1）当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
（2）当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。

（3）你不能在函数组件上使用 ref 属性，因为他们没有实例。（即，Ref属性指向的节点不能是函数组件）

function Child(){
  return <div>1</div>
}
class Father extends React.Component{
  constructor(props){
    super(props);
    this.myRef=React.createRef();
  }
  render(){
    return <Child ref={this.myRef}/>
    //报错Warning: Stateless function components 
    //cannot be   given refs. Attempts to access this 
    //ref will fail.
  }
}

2.在函数组件内部使用 ref 属性

虽然ref属性指向的节点不能是函数组件,但你可以在函数组件内部使用 ref 属性，只要它指向一个 DOM 元素或 class 组件

function CustomTextInput(props) {
  // 这里必须声明 textInput，这样 ref 才可以引用它
  const textInput = React.useRef(null);

  function handleClick = () => {
    textInput.current.focus();
  }
  
  return (
    <div>
      <input type="text" ref={textInput} />
      <input type="button" value="Focus the text input" onClick={handleClick} />
    </div>
  );
}

3.暴露子组件中的dom节点给父组件

（1）直接向子组件添加ref

class Child extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return <input />
  }
}

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

输出为：

当我们向子组件直接添加ref时，只能获取组件实例，而不是 DOM 节点。所以这种方法并不是很好，而且，它还在函数组件上无效。

（2）使用React.forwardRef，来传递ref（就是子组件通过 forwardRef 方法创建）

const Child = React.forwardRef((props,ref)=>(
  <input ref={ref} />
));

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

此时的输出为：

Forwarding refs中提供了一个React.forwardRef来创建组件，在React.forwardRef的方法中传递了参数ref，通过这个ref可以指向具体的某一个dom节点。
父组件myRef —> React.forwardRef中的实参 —> 通过forwardRef方法创建的子组件中的ref —> 指向子组件中的某一个dom节点

4.使用回调Refs

React 也支持另一种设置 refs 的方式，称为“回调 refs”。它能助你更精细地控制何时 refs 被设置和解除。
不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

详情请到官网查看