React技术问题：Racer组件的componentDidMount为何触发后立即执行？

首先，你的两个核心问题多个定时器实例同时运行和Racer的componentDidMount频繁触发其实是同一个原因导致的，咱们一步步拆解：

1. 为什么componentDidMount会反复触发？ #

看你的Track.js和Racer.js代码，有一个致命的问题：你给多个组件的key属性用了uuidv1()动态生成，比如：

• Track组件里的<TrackImage key={uuidv1()} ...>
• Track组件里的<Racer key={uuidv1()} ...>
• Racer组件里的<HelperCenterCar key={uuidv1()} ...>和<HelperDistance key={uuidv1()} ...>

React的key是用来识别组件身份的，每次父组件render时，uuidv1()都会生成全新的字符串，React会认为这些是全新的组件，于是会卸载旧的组件实例，重新创建新的实例。这就导致Racer组件被反复挂载，componentDidMount自然会被频繁触发，每次触发又会创建新的定时器，最终多个定时器同时运行。

2. 怎么解决这个问题？ #

方案一：给组件使用稳定的key #

对于唯一的组件（比如TrackImage、Racer），直接用固定的字符串作为key即可；对于列表类组件（比如障碍物），用数据本身的唯一标识（比如你已经用的obstacle.key）。修改如下：

Track.js的render部分：

render() {
  return (
    <TrackImage key="track-image" id="track" width={this.props.width} height={this.props.height}>
      <Racer key="main-racer" position={this.state.racerCurrentPosition} onRacerPositionChange={this.handleRacerPositionChange.bind(this)} degree={this.state.racerDegree} onRacerDegreeChange={this.handleRacerDegreeChange.bind(this)} obstacleFound={this.state.obstacleFound} trackWidth={this.props.width} trackHeight={this.props.height} onObstacleCheck={this.handleObstacleCheck.bind(this)} />
      { this.props.obstacles.map((obstacle) => {
        return (
          <Obstacle key={obstacle.key} id={obstacle.key} position={obstacle.position} width={obstacle.width} height={obstacle.height} />
        );
      }) }
    </TrackImage>
  );
}

Racer.js的render部分：

render() {
  return (
    <Fragment>
      <Car key="main-car" id={this.state.key} position={this.props.position} degree={this.props.degree}>
        <HelperCenterCar key="center-helper" position={this.state.centerOfCarCoordinates} degree={this.props.degree} />
        <HelperDistance key="distance-helper" onChange={this.handleDistanceChange.bind(this)} position={this.state.centerOfCarCoordinates} degree={this.props.degree} />
      </Car>
    </Fragment>
  );
}

方案二：优化定时器的管理 #

另外，用state存intervalId可能会有异步更新的问题，建议用React的ref来存储定时器ID，这样能更准确地控制定时器：

Racer.js修改：

class Racer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // ... 其他state保持不变
      speed: 0,
      helperForLeftPositioning: 0,
      helperForTopPositioning: 0,
      isMoving: false,
      collision: false,
      centerOfCarCoordinates: { x: 25, y: 12.5 },
      obstacleFound: false,
    };
    this.intervalRef = React.createRef(); // 新增ref存储定时器ID
    this.start = this.start.bind(this);
    this.move = this.move.bind(this);
  }

  componentWillUnmount() {
    window.clearInterval(this.intervalRef.current); // 通过ref清除定时器
  }

  createInterval = () => {
    const intervalId = window.setInterval(() => {
      this.move();
      console.log("IntervalId: " + intervalId);
    },100);
    this.intervalRef.current = intervalId; // 将ID存入ref
  }

  // ... 其他方法保持不变
}

3. 额外的小建议 #

• 你的障碍物检测逻辑里，map返回布尔值数组后再查找true的写法，可以用some方法简化，更高效：

handleObstacleCheck(position, racerPosition) {
  return this.props.obstacles.some((obstacle) => {
    const obstacleRect = document.getElementById(obstacle.key).getBoundingClientRect();
    return position.right >= obstacleRect.left && position.right <= obstacleRect.right 
           && racerPosition.top >= obstacleRect.top && racerPosition.bottom <= obstacleRect.bottom;
  });
}

some会在找到第一个满足条件的元素时立即返回true，避免不必要的遍历。

• 尽量避免直接操作DOM（比如getElementById），可以考虑用React的ref来获取元素的位置信息，更符合React的数据流理念。

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