自公司前後分離上手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。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能
※台北網頁設計公司這麼多該如何選擇?
※智慧手機時代的來臨，RWD網頁設計為架站首選
※評比南投搬家公司費用收費行情懶人包大公開
※回頭車貨運收費標準
※網頁設計最專業,超強功能平台可客製化
※別再煩惱如何寫文案,掌握八大原則!