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

今天项目遇到一个问题，哎好宝，还改了很久…
引用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 leaks
      type.current.destroy();
    }
},[]);

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

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

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

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

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