React中TagCloud文本球体重载后不渲染问题求助

核心问题 #

你把TagCloud的初始化代码写在了useEffect的清理回调函数（return的函数）里，完全搞反了执行时机：

• 清理回调只会在组件卸载或依赖更新时执行，初次加载时根本不会触发初始化
• 页面重载后组件重新挂载，初始化逻辑依然没执行，所以球体消失
• 修改组件时旧组件卸载，执行清理回调创建一个球体，新组件挂载又没初始化，最终出现多个副本

修复后的代码 #

React组件代码

import React, { useEffect, useRef } from "react";
import TagCloud from "TagCloud";

const TextSphere = () => {
  // 用ref保存TagCloud实例，方便后续销毁
  const tagCloudRef = useRef(null);
  // 用ref获取DOM元素，避免类选择器的全局冲突
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const texts = [
      'JavaScript', 
      'CSS', 
      'HTML',
      'C', 
      'C++', 
      'React',
      'Python', 
      'Java',
      'MySQL',
      'jQuery',
    ];

    const options = {
      radius: 300,
      maxSpeed: "normal",
      initSpeed: "normal",
      keep: true,
    };

    // 初始化TagCloud并保存实例
    tagCloudRef.current = TagCloud(containerRef.current, texts, options);

    // 组件卸载时销毁实例，防止内存泄漏和重复创建
    return () => {
      if (tagCloudRef.current) {
        tagCloudRef.current.destroy();
      }
    };
  }, []);

  return (
    <div className="text-sphere">
      <span ref={containerRef} className="tagcloud"></span>
    </div>
  );
};

export default TextSphere;

CSS代码（无需修改，保持原代码即可）

.text-sphere {
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tagcloud {
    display: inline-block;
    top: 0;
    left: 0;
    font-weight: 600;
    letter-spacing: 0.0625em;
    font-size: 1.3em;
}

.tagcloud--item {
    color: black;
    text-transform: uppercase;
}

.tagcloud--item:hover {
    color: rgb(224, 167, 101);
}

关键修复点 #

1. 调整useEffect执行逻辑：把初始化代码放在useEffect主函数中，确保组件挂载时立即创建文本球体
2. 使用Ref获取DOM元素：避免类选择器可能导致的全局匹配问题，尤其当页面中有多个TagCloud组件时
3. 销毁实例：在清理回调中调用destroy()方法，卸载组件时清理资源，防止重复创建和内存泄漏

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