React流式打字效果实现（不需要CSS） - Typing Effect with out use Css

前言

最近有个云栖大会的demo展示需求，要实现个类似的打字效果，所以我找了找相关的库。找到一个还不错的~叫iTyped.js。但是最终的效果和我想要的不太一样，会有回删效果，看了下源码，所以就自己写了一个~

再夸奖下 iTyped.js 只有3K，非常小而美，完全靠JS实现的效果！

 

最终效果

边播放语音，边出现文字的打字效果，gif 效果如下~

 

源码分享

 

变量设置

//全局 变量设置 - 如果想要速度不一致也可以写成内部变量
const typingRate = 250;


//内部 变量设置
    constructor(props) {
        super(props);
        this.state = {
            //打字出的文字
            textAreaShow: "",
            // 是否在打字中
            isTyping: false,
            //等待被打字的数组
            waitToType: [],
            //延迟打字开始的时间
            delayTime: this.props.delayTime || false,
        }