React如何让图标与HighlightSearch组件内容在同一帧渲染？

架构老林

2026-7-3

解决图标与高亮文本不同步渲染的问题

问题根源

你遇到的延迟是因为HighlightSearch里的useEffect是组件挂载/更新完成后才执行的：第一次渲染时，组件先输出空的（或未处理的）内容，等useEffect跑完高亮逻辑、更新state后才会触发二次渲染，所以文本会比图标晚出现。

解决方案：同步计算高亮内容

把高亮处理逻辑从useEffect移到渲染阶段，让文本和图标在同一次渲染中生成：

基础版（同步计算）

修改HighlightSearch组件，直接在渲染时生成高亮后的HTML字符串：

function HighlightSearch({ query, children }) {
  let highlightedText = children;
  
  if (query) {
    // 生成匹配查询的正则，全局不区分大小写
    const regex = new RegExp(`(${query})`, 'gi');
    // 替换匹配内容为高亮标签
    highlightedText = children.replace(regex, '<span class="highlight">$1</span>');
  }

  return <span dangerouslySetInnerHTML={{ __html: highlightedText }} />;
}

优化版（缓存计算结果）

如果文本很长或正则逻辑复杂，用useMemo缓存计算结果，避免重复计算：

import { useMemo } from 'react';

function HighlightSearch({ query, children }) {
  const highlightedText = useMemo(() => {
    if (!query) return children;
    const regex = new RegExp(`(${query})`, 'gi');
    return children.replace(regex, '<span class="highlight">$1</span>');
  }, [query, children]); // 只有query或children变化时才重新计算

  return <span dangerouslySetInnerHTML={{ __html: highlightedText }} />;
}