zoukankan      html  css  js  c++  java
  • 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。

     
  • 相关阅读:
    toj 2819 Travel
    toj 2807 Number Sort
    zoj 2818 Prairie dogs IV
    zoj 1276 Optimal Array Multiplication Sequence
    toj 2802 Tom's Game
    toj 2798 Farey Sequence
    toj 2815 Searching Problem
    toj 2806 Replace Words
    toj 2794 Bus
    css截取字符
  • 原文地址:https://www.cnblogs.com/MrJD/p/13080693.html
Copyright © 2011-2022 走看看