React Ref 和 React forwardRef

Ref 和Dom，Ref是reference（引用）的簡寫。

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就能抓到孫子組件的實例。

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 }