React Native问题：setInterval定时拉取数据时跑马灯停止运行

这个问题我之前也碰到过，本质原因是每5秒拉取数据更新state时，触发了组件的重新渲染，而react-native-marquee在重渲染过程中没能维持住动画状态——要么是组件被重新初始化，要么是正在运行的动画直接被中断了。下面给你几个可行的解决方案：

1. 避免不必要的重渲染（优先推荐） #

如果你的新闻内容不是每次拉取都会变化，或者排队表格的数据更新不需要触发跑马灯组件的重渲染，可以用React.memo包裹跑马灯组件，让它只有在props真正变化时才重新渲染：

import React, { memo } from 'react';
import Marquee from 'react-native-marquee';

// 用memo包裹，仅当news内容变化时才重渲染
const MemoizedMarquee = memo(({ news }) => {
  return <Marquee text={news} />;
});

// 在主组件中使用
class QueuePage extends React.Component {
  // ... 其他逻辑代码
  render() {
    return (
      <View>
        <QueueTable data={this.state.queueData} />
        <MemoizedMarquee news={this.state.news} />
      </View>
    );
  }
}

这样一来，如果新闻内容没有更新，即使父组件因为排队数据更新而重渲染，跑马灯也不会被重新创建，动画就能持续运行。

2. 数据更新时手动重启跑马灯 #

如果新闻内容确实需要频繁更新，那可以通过ref获取跑马灯组件的实例，在数据更新后手动重启动画。假设react-native-marquee提供了start()方法（大部分跑马灯组件都会有类似API）：

类组件写法 #

class QueuePage extends React.Component {
  // 创建ref保存跑马灯实例
  marqueeRef = React.createRef();

  componentDidMount() {
    // 初始化定时器
    this.interval = setInterval(() => this.makeRemoteRequest(), 5000);
  }

  componentDidUpdate(prevState) {
    // 当news数据变化时，重启跑马灯
    if (prevState.news !== this.state.news) {
      this.marqueeRef.current?.start();
    }
  }

  componentWillUnmount() {
    // 清理定时器，避免内存泄漏
    clearInterval(this.interval);
  }

  makeRemoteRequest = async () => {
    const response = await fetch('你的API地址');
    const data = await response.json();
    // 更新排队数据和新闻
    this.setState({
      queueData: data.queueList,
      news: data.latestNews
    });
  }

  render() {
    return (
      <View>
        <QueueTable data={this.state.queueData} />
        <Marquee ref={this.marqueeRef} text={this.state.news} />
      </View>
    );
  }
}

函数组件写法（用Hooks） #

import React, { useState, useEffect, useRef } from 'react';
import Marquee from 'react-native-marquee';

function QueuePage() {
  const [queueData, setQueueData] = useState([]);
  const [news, setNews] = useState('');
  const marqueeRef = useRef(null);

  useEffect(() => {
    // 只在组件挂载时创建一次定时器
    const interval = setInterval(async () => {
      const response = await fetch('你的API地址');
      const data = await response.json();
      setQueueData(data.queueList);
      setNews(data.latestNews);
    }, 5000);

    // 组件卸载时清理定时器
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    // 当news更新时，重启跑马灯
    marqueeRef.current?.start();
  }, [news]);

  return (
    <View>
      <QueueTable data={queueData} />
      <Marquee ref={marqueeRef} text={news} />
    </View>
  );
}

3. 用key强制组件重新挂载（兜底方案） #

如果上面两种方法都不生效，可能是react-native-marquee本身的实现问题。这时可以给跑马灯组件加一个key，当news变化时，key也跟着变化，强制组件重新挂载并自动启动动画：

<Marquee key={this.state.news} text={this.state.news} />

这个方法简单粗暴，但每次新闻更新都会重新创建组件，适合新闻内容确实需要频繁切换的场景。

最后提醒一下：记得在组件卸载时清理定时器，避免内存泄漏哦！

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