自公司前后星散上手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。

 ,

欧博网址开户

www.mmsff.com欢迎进入欧博网址(Allbet Gaming),欧博网址开放会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

Allbet Gaming声明:该文看法仅代表作者自己,与阳光在线无关。转载请注明:联博:Hook踩坑记:React Hook react-unity-webgl
发布评论

分享到:

热搜网头条:华信与立荣航空 “两航线”增班「与换大型机」
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。