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。

巴特西

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

最新文章

热门文章