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。

 
上一篇:centos 7( linux )下搭建elasticsearch踩坑记


下一篇:虚拟机linux 如何挂在U盘,NTFS格式如何挂载