React Ref 和 React forwardRef

1. ref 和dom，ref是reference（引用）的简写。

1. 能力：大多数情况下，props前递可以解决一切问题，但是依然有需要触达react实例或者dom节点的情况，这时候应该使用react ref。
2. 使用：
   1. 用来处理立即执行的动画。
   2. 用来处理非受控组件的焦点，什么是受控/非受控组件参考。
   3. 用来与第三方库对接，我知道的有d3 或者 cocos。

2. react.forwardref((props,ref)=><compnent>)

   1. 简而言之就是自动透传引用（ref），能让组件接收传过来的ref, 向下（或者说向前）传递ref。

      const fancybutton = react.forwardref((props, ref) => (
        <button ref={ref} classname="fancybutton">
          {props.children}
        </button>
      ));
      
      // you can now get a ref directly to the dom button:
      const ref = react.createref();
      <fancybutton ref={ref}>click me!</fancybutton>;　　

   2. 上述代码的解释：

      1. 首先创建了一个ref, 这个ref的目的就是抓到孙子组件中的input节点
      2. 通过组件属性把ref传给子组件<fancybutton>
      3. 子组件通过react.forwardref透传props和ref,这里ref才是我们要注意的点。
      4. 参数ref赋值给孙子组件<button>
      5. 这个ref就能抓到孙子组件的实例。

3. react.forwardref((props, ref)=><componnet>)在高阶组件中的使用：

   1. 比如我们写一个打印前后属性的高阶组件logprops，这个高阶组件能够透传ref

       1 function logprops(component) {
       2   class logprops extends react.component {
       3     componentdidupdate(prevprops) {
       4       console.log('old props:', prevprops);
       5       console.log('new props:', this.props);
       6     }
       7 
       8     render() {
       9       const {forwardedref, ...rest} = this.props;
      11       // 把常规属性"forwardedref"作为ref赋值给传过来的component组件
      12       return <component ref={forwardedref} {...rest} />;
      13     }
      14   }
      15 
      16   // 注意react.forwardref提供的第二个参数ref.
      17   // 我们可以把ref作为一个常规属性"forwardedref"传给logprops这个组件
      18   // 就可以跟实例绑定.
      19   return react.forwardref((props, ref) => {
      20     return <logprops {...props} forwardedref={ref} />;
      21   });
      22 }