React单词游戏：如何快速在大型JSON字典中查找单词？

核心问题分析 #

你当前用Object.keys(data).includes()的方式效率极低，原因有两点：

1. Object.keys(data)每次调用都会生成包含37万+元素的新数组，内存开销大且耗时
2. includes()是线性搜索，每次验证都要遍历整个数组，时间复杂度为O(n)

下面是几个简单高效的优化方案，按实现复杂度排序：

方案1：用Set替代数组查找（最快见效） #

Set的has()方法基于哈希表实现，查找时间复杂度为O(1)，直接解决线性搜索的问题。步骤如下：

1. 导入词典后，提前将所有单词转成小写并存入Set（只做一次，避免重复计算）：

import * as rawData from '../../dictionary/words_dictionary.json';

// 预生成小写单词的Set，全局或组件初始化时创建一次
const wordSet = new Set(Object.keys(rawData).map(word => word.toLowerCase()));

2. 验证逻辑替换为：

const lowerCaseInput = orderedInput.toLowerCase();
if (wordSet.has(lowerCaseInput)) {
  dispatch(actions);
} else {
  dispatch(otherActions);
}

方案2：优化词典加载方式 #

大JSON直接同步导入会拖慢组件初始化速度，改用动态导入+预加载，让词典在组件挂载时异步加载，不阻塞UI：

import { useState, useEffect } from 'react';

function WordGameComponent() {
  const [wordSet, setWordSet] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadDictionary = async () => {
      // 动态导入词典文件
      const rawData = await import('../../dictionary/words_dictionary.json');
      // 转成小写并存入Set
      const words = Object.keys(rawData).map(word => word.toLowerCase());
      setWordSet(new Set(words));
      setIsLoading(false);
    };

    loadDictionary();
  }, []);

  // 验证函数
  const validateWord = (input) => {
    if (!wordSet) return false;
    return wordSet.has(input.toLowerCase());
  };

  // 加载中可以显示loading提示
  if (isLoading) return <div>加载词典中...</div>;

  // ...你的游戏逻辑
}

方案3：优化词典文件格式（可选，进一步提升性能） #

如果可以修改词典文件，把原来的键值对JSON改成纯单词数组，比如：

["afterwash", "afterwhile", "afterwisdom", "afterwise", "afterwit", ...]

这样导入后直接转Set更省内存（不需要存储多余的1值），加载速度也会更快：

import wordArray from '../../dictionary/words_array.json';
const wordSet = new Set(wordArray.map(word => word.toLowerCase()));

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