react createRef和useRef的forwardRef区别和用法

useRef

一般用于函数组件
useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量.
当 useRef 的内容发生变化时,它不会通知您。
更改.current属性不会导致组件重新渲染。因为他一直是一个引用 。

createRef

一般用于类组件
	React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
如果用于函数组件中
	当App这个函数组件被重新渲染时，App函数将会执行，并且重新创建、初始化所有的变量和表达式。
	因此，createRef每次都会被执行，所以对应的值总是为null。

两者区别：

createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。

实际应用的区别
useRef 仅能用在 FunctionComponent，createRef 仅能用在 ClassComponent。

forwardRef

父组件创建的ref,可以直接挂载到子组件上

例如某些input组件，需要控制其focus，本来是可以使用ref来控制，
但是因为该input已被包裹在组件中，
这时就需要使用Ref forward来透过组件获得该input的引用。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;