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的更多相关文章
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- 【React踩坑记二】react项目实现JS路由跳转
这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- 【踩坑记】从HybridApp到ReactNative
前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
随机推荐
- webpack指南(二)code spliting+懒加载
code spliting 把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件. 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时 ...
- python -使用Requests库完成Post表单操作
""" 使用Requests库完成Post表单操作 """ #_*_codingn:utf8 _*_ import requests fro ...
- 解决el-tree横向滚动条问题
代码如下 效果如图 仅做下记录,不做过多解释
- mysql基本操作汇总
1.数据库操作 (1)创建数据库 CREATE DATABASE <数据库名>; 例子: CREATE DATABASE IF NOT EXISTS RUNOOB DEFAULT CHAR ...
- 【转发】基本adbui命令使用 可做图像识别
原文请参考,很详细:hao1032/adbui 非常详细,感谢整理!!首先了解下 adb命令大全,adb最全的命令
- 【Gabor】基于多尺度多方向Gabor融合+分块直方图的表情识别
Topic:表情识别Env: win10 + Pycharm2018 + Python3.6.8Date: 2019/6/23~25 by hw_Chen2018 ...
- 题解 P6509 【[CRCI2007-2008] JEDNAKOST】
洛谷题目传送门!! 洛谷博客!! 这道题感觉是一个很另类的DP 至少我的做法是这样的. 重要前置思想:把A存成字符串!!! (应该也没人会想着存成int和long long 吧) 首先,我们定义状态 ...
- (板子)缩点 + DAG上的DP(深搜)luogu P3387
板子传送门 根据题目意思,我们只需要找出一条点权最大的路径就行了,不限制点的个数.那么考虑对于一个环上的点被选择了,一整条环是不是应该都被选择,这一定很优,能选干嘛不选.很关键的是题目还允许我们重复经 ...
- 设计MyTime类 代码参考
#include <iostream> #include <cstdio> using namespace std; class MyTime { private: int h ...
- JAVA自学笔记(1)
JAVA入门级知识储备(一) 1.Scanner的欢乐接收 import java.util.Scanner; public class first { public static void main ...