React实现同组件实例顺序执行：后一个TypeWriter等待前一个完成

你不需要用互斥锁来实现这个需求——React是状态驱动的框架，用状态控制渲染时机+组件回调的方案更贴合React的设计逻辑，下面是具体实现步骤：

1. 修改TypeWriter组件，添加完成回调 #

给TypeWriter新增一个onComplete props，当打字动画全部完成时触发这个回调，通知父组件当前动画结束：

import { useState, useEffect } from 'react';

const TypeWriter = ({ text, delay, onComplete }) => {
  const [currentTxt, setCurrentText] = useState('');
  const [currentIdx, setCurrentIdx] = useState(0);

  useEffect(() => {
    let timeOut;
    
    if (text.length > currentIdx) {
      timeOut = setTimeout(() => {
        setCurrentText(prev => prev + text[currentIdx]);
        setCurrentIdx(prev => prev + 1);
      }, delay);
    } else {
      // 打字完成时调用传入的回调函数
      onComplete?.();
    }

    return () => clearTimeout(timeOut);
  }, [currentIdx, text, delay, onComplete]);

  return <> {currentTxt} </>;
};

2. 在父组件中控制第二个TypeWriter的渲染 #

在SomeComponent里声明一个状态firstComplete，默认是false，第一个TypeWriter完成后通过回调把状态改成true，此时才渲染第二个TypeWriter：

import { useState } from 'react';
import TypeWriter from './TypeWriter';

const SomeComponent = () => {
  const [firstComplete, setFirstComplete] = useState(false);

  return (
    <h1 className={`${styles.heroHeadText} lg:leading-normal -md:text-xl -md:mt-5`}>
      <TypeWriter 
        text="Hello, it's me " 
        delay={200} 
        onComplete={() => setFirstComplete(true)} 
      />
      {/* 只有第一个动画完成后才渲染第二个 */}
      {firstComplete && (
        <span className='text-[#915eff]'>
          <TypeWriter text=" name" delay={200} />
        </span>
      )}
    </h1>
  );
};

为什么不用互斥锁？ #

互斥锁是多线程/多进程环境下用来解决资源竞争的概念，而React运行在单线程的浏览器环境中，不存在多线程资源竞争的问题。用React的状态机制来控制组件渲染时机，是最符合React思维的解决方案，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者Adnan Shaikh