为什么我在 React.js 中使用 typeped 包后得到双字母？

Question

当我的 react.js 网站使用 typeped 包时，它显示双字母而不是一个。截图：https://ibb.co/pd6GmHQ 虽然运行曾经没有 backDelay 和 backSpeed 它运行很好，因为只显示一个字符。删除 backDelay 和 backSpeed 后，它不是运行正确的，即它显示两位数。如果这是一个愚蠢的问题，我很抱歉，我是新手。这是我的 jsx 文件：

import React, { useEffect, useRef } from 'react'
import "./intro.scss"
import { init } from 'ityped'

export default function Intro() {

  const textRef = useRef();

  useEffect(()=>{
    init(textRef.current,{
      showCursor: true,
      backDelay: 1500,
      backSpeed:60,
      
      strings: ["Developer","Designer","Content Creator"],
    });

  },[]);

  return (
    <div className="intro" id="intro">
        <div className="left">
          <div className="imgContainer">
            <img src="assets/smit.jpg" alt="" />
          </div>
        </div>
        <div className="right">
          <div className="wrapper">
            <h2>Hi there, I'm</h2>
            <h1>Smit Thakkar</h1>
            <h3>Freelance <span ref ={textRef}></span></h3>
          </div>
          <a href="#probackground">
          <img src="assets/down.png" alt="" />
          </a>
        </div>
    </div>
  )
}

Answer 1

重复问题是两个主要因素的组合：

1.) 这个ityped package operates at the DOM level, which is discouraged in React, since it utilizes a virtual DOM that expects to be updated by updating React state. While this package can and does work, you're going to find that it duplicates when using StrictMode和useEffect——在开发中，严格模式调用useEffect两次；结果，调用 init 两次。

2.) 它重复的另一个原因是因为它使用的 setInterval 在热重载时没有被清理。因此，每次您对组件进行更改时，它都会复制 here 所示的 init 功能（对 App.js 文件进行任何更改并注意 init 每次发生热重载时都会发生；关于这一点，这个例子使用了一个 hack work-around 使用 isLoading 全局变量，我强烈反对在你的项目中使用它。

推荐等级：

A.) 根本不要使用这个包。

B.) 不要使用该包，而是使用 React state/React 生命周期开发相同的功能，这些生命周期将在热 reload/component 卸载时自行清理。

C.) 使用包并处理开发中的重复，但要知道这可能不会发生在生产中。虽然......这个包没有对组件卸载进行任何清理的事实应该令人不安，并且可能会导致 MPA（多页应用程序）出现问题，其中组件是 unmounted/remounted - 这可能会导致重复生产中的问题。更令人不安的是，这个包没有任何防止 element 未定义的措施，所以它会 throw errors as well.

Answer 2

您可以使用打字机代替打字机。只需将其安装为 npm install typewriter-effect。导入它 import Typewriter from 'typewriter-effect'; 然后在 html 标签之间使用它，比如 span 或 h1。

         <Typewriter 
           
           options={{ 
           strings:["Developer", "Designer", "Content Creater"],
           autoStart:true,
           delay:75,
           loop:true
           }}
           
           />

为什么我在 React.js 中使用 typeped 包后得到双字母？

Why am I getting double letters after using ityped package in React.js?

web-development-server

web

reactjs