Hook踩坑記：React Hook react-unity-webgl

　　自公司先後分離上手React以來，一個坑一個坑的踩，Class的全生命週期雲裏霧裏，還麼屢明白，就抱上了Hook的大腿不鬆手，確實爽到飛起。修改到Hook的過程基本比較順暢，直接少了三分之一的代碼，組件更容易封裝，調試更方便，諸多優勢在此再也不贅述，已有各路大佬紛紛評價，此處貼上中文官方地址：React-Hook文檔。這裏主要講講修改到一塊關於 Unity 3D模型加載的踩坑記。

　　背景：React 加載 Unity 3D模型 ，使用到一個插件 react-unity-webgl，感興趣的盆友能夠自行查閱。

　　由於Class改Hook處理語法變更，邏輯代碼基本不用怎麼改動，因此基本沒有阻力，可是當我把這塊業務代碼改爲Hook時，跟模型交互時通訊失敗，沒法驅動模型動做。百思不得其解，弄了倆測試頁面，test_hook、test_class，只能debugger，一步一步調，發現一些端倪。

　　Class 有些初始化的代碼 都寫在了constructor(props){}，這個你們都明白，第一次加載頁面的時候會走。hook呢，最外層是一個大方法，以前遷移的時候就寫在方法裏最頂部了，也沒什麼問題。加載模型第一句是 const unityContent = new UnityContent(參數1,參數2)；兩個頁面都能加載出來模型，可是跟斷點發現hook頁面的 unityContent 對象比class的缺乏了一個重要的屬性：unityInstance，通訊的方法就是靠它 Send() 的，並且發現同一個對象，屬性id一直在變，原來每次修改state時，都會走聲明的這段方法，致使每次都 new 一個新的對象，致使unityInstance屬性沒有正確掛在unityContent對象上。

　　在知道大概原理的狀況下，搞成全局變量，在加載時判斷是否已經初始化，問題就迎刃而解了（其實費了九牛二虎之力）。

　　寫過hook的盆友第一反應會想到聲明寫到useEffect，而後 [] 只執行一次纔是正確的寫法。

　　之因此沒有呢，是由於模型加載跟其餘的業務沒什麼關係，我並不須要渲染完整個DOM在來加載，而且加載模型很費時間，必需要剛加載頁面就同時加載模型，因此纔有這次踩坑記。

　　總結：Hook寫在useEffect以外的代碼會屢次加載（包括刷新狀態），要作好判斷，不然很容易產生bug。更推薦（官方推薦）按業務按順序把初始化方法寫到useEffect。