React对接游戏引擎：传入的Engine实例属性变更无法触发组件重渲染

看起来你碰到了React状态驱动渲染和外部非React对象之间的同步问题——React只会响应组件state或props的引用变化，而engine.savedGames如果是在原数组上做修改（比如push新元素），数组引用没变，React就不会触发重渲染。结合你不能修改Engine本身的限制，这里有几个可行的解决方案：

方案1：在App组件内维护同步状态（最推荐） #

核心思路是把Engine的savedGames同步到React组件的state中，让React通过状态变化感知数据更新。

子方案1a：针对已知操作手动更新状态 #

既然你知道点击「新建游戏」按钮会修改savedGames，可以在调用engine.newGame()后手动触发状态更新：

class App extends React.Component<ComponentProps> {
  state = {
    saves: [...this.props.engine.savedGames] // 初始化时复制一份存档列表
  };

  // 封装新建游戏的逻辑，执行后同步状态
  handleNewCharacter = () => {
    this.props.engine.newGame();
    // 同步最新的存档列表到state
    this.setState({ saves: [...this.props.engine.savedGames] });
  };

  render() {
    return (
      <div className="container-fluid">
        <SaveList 
          saves={this.state.saves} 
          newCharacter={this.handleNewCharacter} 
        />
      </div>
    );
  }
}

这个方案简单直接，适合只有特定操作会修改存档的场景。如果还有其他场景（比如游戏自动存档）会修改savedGames，可以结合下面的方案。

子方案1b：利用Engine的事件机制（如果支持） #

很多游戏引擎会在数据变化时触发自定义事件，比如saveAdded、saveUpdated。如果你的Engine提供这类事件，可以在组件挂载时订阅，自动同步状态：

class App extends React.Component<ComponentProps> {
  state = {
    saves: [...this.props.engine.savedGames]
  };

  componentDidMount() {
    // 假设Engine提供onSaveAdded方法订阅存档新增事件
    this.props.engine.onSaveAdded(() => {
      this.setState({ saves: [...this.props.engine.savedGames] });
    });
  }

  componentWillUnmount() {
    // 记得取消订阅，避免内存泄漏
    this.props.engine.offSaveAdded();
  }

  render() {
    return (
      <div className="container-fluid">
        <SaveList 
          saves={this.state.saves} 
          newCharacter={() => this.props.engine.newGame()} 
        />
      </div>
    );
  }
}

子方案1c：轮询检查存档变化（无事件机制时的兜底方案） #

如果Engine没有提供事件，可以用定时器定期检查savedGames的变化，比如对比数组长度：

class App extends React.Component<ComponentProps> {
  state = {
    saves: [...this.props.engine.savedGames]
  };
  intervalId: number | null = null;

  componentDidMount() {
    // 每500ms检查一次，可根据需求调整间隔
    this.intervalId = window.setInterval(() => {
      const currentSaves = this.props.engine.savedGames;
      if (currentSaves.length !== this.state.saves.length) {
        this.setState({ saves: [...currentSaves] });
      }
    }, 500);
  }

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

  render() {
    return (
      <div className="container-fluid">
        <SaveList 
          saves={this.state.saves} 
          newCharacter={() => this.props.engine.newGame()} 
        />
      </div>
    );
  }
}

方案2：强制组件重渲染（应急兜底，不推荐） #

如果上面的方案都无法实现，可以通过修改组件key的方式强制重渲染——当key变化时，React会卸载旧组件并挂载新组件：

// 在App的render方法中
<SaveList 
  saves={this.props.engine.savedGames} 
  newCharacter={this.props.engine.newGame.bind(this.props.engine)}
  key={this.props.engine.savedGames.length} // 存档数量变化时，key同步变化
/>

这个方案比较粗暴，会丢失组件内部状态，只适合结构简单的组件。

额外优化：避免重复创建函数 #

你当前用this.props.engine.newGame.bind(this.props.engine)会在每次render时创建新函数，导致SaveList组件的props频繁变化，触发不必要的重渲染。可以在App组件内提前绑定好函数：

class App extends React.Component<ComponentProps> {
  // 用箭头函数绑定this，确保引用稳定
  newCharacter = () => {
    this.props.engine.newGame();
  };

  render() {
    return (
      <div className="container-fluid">
        <SaveList saves={this.state.saves} newCharacter={this.newCharacter} />
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Ahmet Can Güven