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。
- 什么是React Hook?
- Unity WebGL与IIS小坑
- unity发布的WebGL部署到IIS
- ReactHooks--踩坑1 :React Hook xx is called in function xx which is neither a React function component
- Unity3D设置Webgl项目支持手机访问
- {Unity} WebGL版本不能使用反射机制以及解决方法
- 使用 JS 及 React Hook 时需要注意过时闭包的坑(文中有解决方法)
- Unity发布到WebGL出错:il2cpp.exe did not run properly
- Unity开发WebGL项目开发问题与解决方法汇总
- Unity发布WebGL后跳转页面的问题
- unity 生成webGL自适应屏幕
- Unity发布WebGL后使用手机浏览器打开Touch手指触摸无法响应
- Unity,WebGL, 页面JS调用Unity方法
- Unity5.3.3 webgl 注意
- Unity2018新版Webgl和网页通信 基于jslib的Unity和网页中的方法互相调用
- Unity发布WebGL减小内存的使用
- Unity 发布WebGL并与JS进行传参交互
- React教程:4 个 useState Hook 示例
- 调unity webgl sendmessage
- UnityWebgl接收Html传递来的参数