为何在componentDidMount中调用的JS函数会无限循环执行？

核心原因 #

1. 组件重复挂载：如果你的组件是路由关联组件，打开URL（尤其是同域路由跳转）会触发路由变化，导致组件被卸载后重新挂载，componentDidMount就会反复执行，进而重复打开URL。另外，如果打开URL的操作间接修改了组件state/全局状态，引发组件重渲染+条件挂载，也会触发重复挂载。
2. 标志位无效：你之前用的普通变量标志位，在组件每次渲染时都会被重新初始化，根本存不住状态，自然起不到限制作用。

具体解决办法 #

1. 用React State存触发标志 #

把是否已经打开过URL的状态存在组件state里，跨渲染保留状态：

class YourComponent extends React.Component {
  state = {
    hasOpenedTargetUrl: false
  };

  componentDidMount() {
    if (!this.state.hasOpenedTargetUrl) {
      // 执行打开URL逻辑，比如新标签页打开
      window.open('https://your-target-url.com', '_blank');
      // 更新状态，标记已执行
      this.setState({ hasOpenedTargetUrl: true });
    }
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

2. 用Ref存标志（更高效，无重渲染） #

如果不需要因标志位变化触发组件重渲染，用Ref更合适：

class YourComponent extends React.Component {
  hasOpenedUrl = React.createRef(false);

  componentDidMount() {
    if (!this.hasOpenedUrl.current) {
      window.open('https://your-target-url.com', '_blank');
      this.hasOpenedUrl.current = true;
    }
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

3. 避免路由触发组件重复挂载 #

如果是路由切换导致的问题：

• 用React.memo包裹组件，避免无意义的重渲染和挂载；
• 打开URL时指定_blank参数，在新标签页打开，不要影响当前页面的路由状态。

4. 清理定时器副作用（如果用过） #

如果你之前用了setInterval，一定要在组件卸载时清除，不然定时器会一直跑：

class YourComponent extends React.Component {
  intervalId = null;

  componentDidMount() {
    this.intervalId = setInterval(() => {
      // 你的定时逻辑
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

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