React中如何为<span>标签绑定函数以动态显示数字

你的代码存在3个直接导致渲染失败的问题：

• 自定义的onlineCount函数没有写返回值，函数内仅执行了数值计算但没有通过return返回结果，执行后默认得到undefined
• 脱离React状态机制的普通变量/函数计算结果变化，不会触发组件重渲染，就算定时器算出了新值，页面也不会同步刷新
• span标签内写的{() => onlineCount}是传入了一个未执行的函数引用，JSX不会自动执行这个函数拿返回值渲染

使用React内置的状态Hook存储动态变化的在线人数，配合副作用Hook管理定时器生命周期，避免内存泄漏，完整代码如下：

import { useState, useEffect } from 'react';

function HeaderTop() {
  // 初始化在线人数状态，首次加载先生成一次随机数
  const [onlineNum, setOnlineNum] = useState(Math.floor(100 + 480 * Math.random()));

  useEffect(() => {
    // 组件挂载后启动定时器
    const timer = setInterval(() => {
      // 每秒生成新的随机数，更新状态后会自动触发组件重渲染
      const newCount = Math.floor(100 + 480 * Math.random());
      setOnlineNum(newCount);
    }, 1000);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="header-top">
        <div className="header-social">
        <div className="header-online">
          <div className="online-general-bar">
            <div className="online-bar"></div>
          </div>
          {/* 直接渲染状态变量即可展示最新数字 */}
          <span>{onlineNum}</span>
        </div>
        </div>
    </div>
  )
}

export default HeaderTop;

• 只有存在React状态里的值发生变化时，组件才会自动重渲染，同步更新页面展示内容
• 定时器的清除逻辑是必填项，否则组件销毁后定时器仍在后台执行，会造成不必要的性能损耗和内存泄漏
• 随机数生成逻辑不需要抽成全局函数，在状态更新时直接计算即可

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