React Ref 和 React forwardRef

1. Ref 和Dom

1. ref是reference(引用)的简写。
2. 能力：大多数情况下，props向下递可以解决一切问题，但是依然有需要触达子组件React实例或者操作子孙组件Dom节点的情况，这时候应该使用React Ref。
3. 使用场景：
   1. 用来处理立即执行的动画，(我们知道流畅的动画需要DOM节点(D3.js)或者node节点(cocos.js))。
   2. 用来处理非受控组件的焦点，什么是受控/非受控组件参考文章。
   3. 用来与第三方库对接，我知道的有d3 或者 cocos，因为第三方库需要获取dom或者节点。

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:
      // 现在你可以获取DOM按钮的引用
      const ref = React.createRef();
      <FancyButton ref={ref}>Click me!</FancyButton>;　　

   2. 上述代码的解释：

      1. 首先创建了一个ref, 这个ref的目的就是抓到子组件中的<button>DOM节点
      2. 通过组件jsx属性把ref传给子组件<FancyButton>，这一行

         <FancyButton ref={ref}>Click me!</FancyButton>;　

      3. FancyButton组件通过React.forwardRef透传props和ref,这里ref才是我们要注意的点。
      4. 参数ref赋值给子组件<button>
      5. 当ref关联上之后，这个ref.current将指向<button>的DOM节点。

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 }