项目问题记录：使用javascript打字库type.js时出现两个光标—

今天项目遇到一个问题，哎好宝，还改了很久…
引用type.js，这是一个模拟打字的js库，具体可以参照官方文档：
github官方文档
这个博客写了操作，比较详尽：
type.js——javascript打字动画库

我这篇博客就不作具体阐述，今天我遇到的问题是这样的，我的项目是create-react-app搭建的react项目。我在函数组件中引入type.js并进行使用，如下所示：

import Typed from 'typed.js';export function Home() {useEffect(() => {  var type = new Typed('.typing-text',{strings : [ 'web designer', 'front end developer', 'graphic designer', 'photographer' ],typeSpeed:200,backSpeed: 50, });
},[]);

然后我就发现页面中出现了两个光标：

刚开始我以为是光标速度出现的时间和消失的时间出现了重合，才出现这种情况，然后我就开始查github官方文档，查到各种调整时间的方式，调了很久，这个问题还是没有解决，到底问题出在了哪呢；

然后我F12，看了一下页面后台：

这里的typing-text，就是我写的span，type动画变化的也就是这个span。但是后面这两个span，不是我写的，看样子应该是这个插件加进去的，为什么是加了两个呢，有时候甚至加了三个。

然后我突然就想到之前学习生命周期的时候，会出现两次渲染的情况，所以我就重新看了官方文档，发现是我useeffect用错了。我照着官方文档修改，最后是这样写的：

import Typed from 'typed.js';
export function Home() {useEffect(() => {  var type = new Typed('.typing-text',{strings : [ 'web designer', 'front end developer', 'graphic designer', 'photographer' ],typeSpeed:200,backSpeed: 50,});return () => {// Make sure to destroy Typed instance during cleanup// to prevent memory leakstype.current.destroy();}
},[]);

多了一个return，但是页面正常了，只有一个光标了。为什么会出现这样的情况呢？？

这个插件相当于做了两项工作：

改变span文档中的文字；
在原先的span后面加一个光标span；

这两项工作新建了dom元素，useeffect函数这里第二个参数是[],相当于componentdidMount,每次页面发生改变，都会重新渲染，渲染都会调用。

所以每次span中文字发生变化，就会新建一个光标span，这里就是因为没有消耗原先的光标span，所以在第二次渲染的时候才会出现多个光标span，这里的return就是消除上一次的光标span;

项目问题记录：使用javascript打字库type.js时出现两个光标——useeffect销毁元素相关推荐

【网络通信 -- WebRTC】项目实战记录 -- Chrome 启动参数总结
[网络通信 -- WebRTC]项目实战记录 -- Chrome 启动参数总结 1 -- 报告伪分配跟踪.伪跟踪从当前活动的跟踪事件派生. 2 --/prefetch:1 /prefetch:启动各种 ...
Web基础之Servlet+JDBC+JSP项目实战记录（一）
Web基础之Servlet+JDBC+JSP项目实战记录(一) 一.项目说明: 通过前面的学习,我们已经对Servlet有了一定的了解:接下来我们要结合数据库和JSP技术一步一步完成一个小型的动态we ...
（B站云e办）SpringBoot开发项目实战记录（七）(员工管理（分页知识）)
(B站云e办)SpringBoot开发项目实战记录(七) 一.员工管理 1.1 准备工作(分页配置类.日期格式化类) 1. mybatisplus配置类分页 2. 日期格式化类(converter) ...
（B站云e办）SpringBoot开发项目实战记录（八）(Easy poi 完成excel导出导入)
(B站云e办)SpringBoot开发项目实战记录(八) 一. pom依赖二. 下载文件 2.1 jopo注释注解@Excel与@ExcelEntry 2.2 controller层 (完成exce ...
javaweb项目问题记录(一)
此文章跟随项目进度进展,用于记录项目中的错误,如文章有错误欢迎指出. 一.ResourceBundle.getBundle文件路径问题 src/config/jdbc_mysql.properties ...
【Python飞机大战游戏实战+笔记】黑马程序员Python教程项目实战记录【超详细】
博主在哔哩哔哩上学习了黑马程序员的python教程,并且完成了老师讲的项目实战,为了巩固知识点通过这篇博客来记录一下. 目录 1. 创建python项目+pygame模块下载 1.1 创建项目 1.2 ...
尚硅谷——谷粒商城项目开发记录——2021.11.19
尚硅谷--谷粒商城项目开发记录--2021.11.19 出现错误 1.SpringBoot测试类出现Could not autowire. No beans of 'BrandService' typ ...
尚硅谷——谷粒商城项目开发记录——2021.11.21
尚硅谷--谷粒商城项目开发记录--2021.11.21 概念: 1.var和let的区别: 作用域: var 声明的变量往往会越域 let 声明的变量有严格局部作用域声明次数: var 可以声明多次 ...
尚硅谷——谷粒商城项目开发记录——2021.11.20
尚硅谷--谷粒商城项目开发记录--2021.11.20 概念: 1.SpringCloud Alibaba: 简介: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...

项目问题记录：使用javascript打字库type.js时出现两个光标——useeffect销毁元素

项目问题记录：使用javascript打字库type.js时出现两个光标——useeffect销毁元素相关推荐

最新文章

热门文章