React中如何精简onClick触发speak-tts朗读的重复代码？

DevOps 小满

2026-8-28

精简实现方案

原有代码存在不少冗余逻辑，可以从以下几个方向优化：

固定不变的单词文本不需要用useState存储，静态值直接定义常量即可
每次组件渲染都新建Speech实例、重复执行初始化逻辑，会造成性能浪费，实例只需要初始化一次
三个逻辑完全一致的点击处理函数可以合并，甚至可以直接写在行内消除函数定义
重复的DOM结构可以通过数组遍历渲染，不用重复编写几乎完全一致的标签块

精简后代码

import React, { useMemo } from "react";
import Speech from "speak-tts";

// 静态单词列表提为组件外常量，组件重渲染不会重复创建
const WORD_LIST = ["apple", "banana", "carrot"];

function Alphabet() {
  // 语音实例仅初始化一次，避免重复创建导致的异常和性能损耗
  const speech = useMemo(() => {
    const instance = new Speech();
    instance.init({
      lang: "en-US",
      rate: 0.4,
    }).then(data => {
      console.log("Speech is ready, voices are available", data);
    }).catch(e => {
      console.error("An error occured while initializing : ", e);
    });
    return instance;
  }, []);

  return (
    <>
      {WORD_LIST.map(word => {
        const displayWord = word.charAt(0).toUpperCase() + word.slice(1);
        return (
          <React.Fragment key={word}>
            <h2>{displayWord}</h2>
            <button
              value={displayWord}
              onClick={() => speech.speak({ text: word })}
              alt="click here for pronounciation"
              className="buttonSound"
            >
              🔊
            </button>
          </React.Fragment>
        )
      })}
    </>
  );
}

export default Alphabet;