前情提要 ?

其實 React 寫到現在已經滿一年了，還是有不少 React 的東西我不是很了解，

究竟是因為用不到所以不了解，還是因為不了解所以沒用到呢？

因為我在看一些 document 的時候，看到有一些 forwardRef 的用法，

就決定來了解一下這到底是什麼？

什麼是 forwardRef ?

我讀了一下文件，

以我的理解來說就是，

「把子層 component 的 ref 傳到父層去使用」

疑問

看起來這個定義蠻直觀的，

而且本身命名也是吻合他的用法，

但去了解他具體怎麼用的時候我就產生了一些疑問，

不囉唆直接上 code

這是一般使用 forwardRef 的方法

• 在要使用 ref 的那一個 component 使用 useRef 建立 ref
• 傳給要操作的 dom 的 component 裡面
• component 會用 forwardRef 這個 function 包住 component，他會回傳兩個參數分別是 props 和 ref
• 在把 ref 傳到要操縱的元素上面即可

import React, { useEffect, forwardRef, useRef } from "react";

export function App(props) {
  const btnRef = useRef(null);

  useEffect(() => {
    console.log(btnRef, "btnRef");
  }, []);
  return (
    <div className="App">
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>

      <CustomButton ref={btnRef} />
    </div>
  );
}

const ButtonWithForwardRef = forwardRef(function CustomButton(props, ref) {
  return <button ref={ref}>button</button>;
});

做到這邊其實很直觀的就會想到一個問題

那就是整個傳入 ref 的概念不就跟傳 props 一樣嗎？

為啥還要多一個 forwardRef 來只用來傳 ref ？

沒錯

我硬要用一般 props 傳入的方法一樣可以 work

但要注意的是情事 component 沒有執行 forwardRef 時

在父層傳入會無效，因此要命名 ref 以外的 e.g. btnRef 之類的

So Why forwardRef

那照前面的說明，forwardRef 好像就沒有存在的必要？

我的結論是

如果是寫 function component 確實是沒有差別

除了以 prop 傳 ref 可能會讓別人在使用 component 的時候比較不理解，因為他不能直接命名 ref

第二個原因是為了讓class component重構至function component能更佳 smooth，

不需要再去改父層的 api

詳細的解說在這