reference：引用
ref不会传递到props中！！

场景：

1. 希望调用真实的DOM元素中的某个方法

2. 某个时候需要调用自定义组件、类组件中的某个方法

   ref的返回值

3. ref作用于内置html组件（div、button、h等）时，得到的将是真实的DOM对象

4. ref作用于类组件时，得到的将是 类的实例
5. ref不能写在函数式组件上(但可以写它的内部的元素上啊)

   用法

ref不再推荐使用字符串赋值，字符串赋值的方式将来可能会被移除（因为有严重的效率问题且不灵活）

目前，ref推荐使用对象或者是函数

ref为对象

通过React.createRef()函数创建（每回创建的是不同的对象）, 所返回的对象里有个属性叫 current , 通过它就能拿到对应的东西了（渲染的时候就可以拿到了）
那为什么不自己写个ref对象呢？{current: null}
因为还是考虑到了效率问题

ref为函数

<input ref={(el) => {console.log('会被调用2次', el); this.txt = el;}} />

该函数的调用时间：

1. 组件挂载完成之后会调用该函数。在 componentDidMount 里面就可以使用ref
2. 如果ref的值发生了变动（即旧的函数被新的函数替代），会分别调用旧的函数以及新的函数(即两次)，时间点出现在componentDidUpdate之前。旧的函数被调用时，传递null；新函数被调用时，传递dom对象

• 可以将函数保存起来，则就只调用一次，

1. 如果ref所在的组件被卸载，会调用函数

   谨慎使用ref！！

   因为它和react的哲学理念（尽量使用props、state）不符，一直用ref的话，和原生有啥区别呢
   能够使用属性和状态进行控制，就不要使用ref

Ref 转发

首先，函数组件上不能使用ref，但是我们想引用这个函数组件内部的东西，怎么办呢——React.forwardRef()

React.forwardRef()

可以把它当作一个HOC。

function A(props, ref){
    console.log(ref);
  return (
      <h1 ref={ref}>
        组件A
        <span>{props.words}</span>
    </h1>
  )
}
const NewA = React.forwardRed(A);
...
const ARef = React.createRef();
...//给这个NewA放置ref就行了
<NewA ref={this.ARef} words='whatever' />

forwardRef方法需注意

1. 参数：传递的必须是函数组件，不能是类组件，并且函数组件需要有第二个参数来得到传递过来的ref
2. 返回值：返回一个新的组件

   主要是为了解决高阶组件的ref问题

   包装层不能影响入参组件，而应该只是增强入参组件的功能