主要分析函式式元件

useRef(/createRef)

useRef 和 createRef 前者每次渲染都是同一個，後者則是每次渲染都會新建。兩者的功能都是類似於 Vue創造一個 ref 物件，其 current屬性會指向 DOM 節點。
下面談一下 forwardRef 這個 hook
如下，react特性之一就是單向資料流，而 forwardRef可以幫助父元件訪問子元件的屬性，
原理：父元件建立一個parentHook，下放魚鉤，子元件身上封裝一層潛水員，潛水員捕捉到hook並掛到子元件身上，遂接下來可以順利訪問
很明顯，React官方也不支援這種潛水員掛魚的行為!

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


// 父元件
import FancyButton from './FancyButton'
// 你可以直接獲取 DOM button 的 ref：
const parentHook = React.createRef(); //放鉤
<FancyButton ref={parentHook}>you can hihihi if you could chase me !!!! </FancyButton>;
 

由於使用class元件當專案比較大時，需要加入很強的程式碼規範才能保證可維護性、可擴充套件性，class在編譯時也會產生大量的冗餘程式碼。使用hook鉤子既可以輕量化程式碼、也可以讓開發者減少對複雜的this處理
所有的hook在父元件的props變化都會重新執行一遍

JSX中原來可以用 模板字串 ``