如何存储复用component各实例的state值以便后续使用？

核心思路：不需要为每个组件实例单独声明state变量，只需要用**键值对结构（对象/Map）**在公共存储位置统一存储所有实例的状态，用每个实例的唯一ID作为索引即可，完全不会增加额外的代码体量。

方案1：父组件单state存储（最常用，适用于需要用score数据驱动父级UI渲染的场景） #

你只需要在父组件声明一个类型为对象的state，所有复用子组件的score都会按唯一ID存在这个对象里：

// 父组件state定义
state = {
  // 格式为 { [组件唯一ID]: 对应score值 }，不管复用多少个组件都只需要这一个state字段
  allComponentScores: {}
}

定义统一的更新方法，供子组件调用更新自己的score：

updateComponentScore = (componentId, newScore) => {
  this.setState(prevState => ({
    allComponentScores: {
      ...prevState.allComponentScores,
      [componentId]: newScore
    }
  }))
}

复用子组件时，给每个子组件传入唯一ID和更新方法：

// 父组件render内复用组件
<YourComponent id="scene1" updateScore={this.updateComponentScore} />
<YourComponent id="scene2" updateScore={this.updateComponentScore} />
<YourComponent id="scene3" updateScore={this.updateComponentScore} />

子组件内部score变更时，调用传入的updateScore方法上报即可：

// 子组件内score变更时调用
this.props.updateScore(this.props.id, 新的score值)

后续要访问所有实例的score，直接读取this.state.allComponentScores即可，也可以按ID单独取对应实例的score。

方案2：Context全局存储（适用于组件嵌套层级深、跨多模块需要访问所有score的场景） #

如果你的复用组件分散在多层嵌套的组件树里，不想逐层传递更新方法，可以把存储所有score的对象和更新方法放到React Context里：

1. 外层创建Context，Provider包裹所有需要用到score的组件范围
2. 所有复用的子组件直接消费Context，调用Context里的更新方法上报自己的score
3. 任意位置都可以消费Context拿到所有实例的score值

方案3：外部变量存储（适用于不需要用score触发UI渲染的场景） #

如果这些score值只需要做数据统计、不需要用来渲染UI，你可以直接在组件外声明一个全局Map/对象存储，完全不占用React state：

// 在组件代码外部单独定义，不属于任何组件的state
const componentScoreMap = new Map()

子组件score变更时直接更新这个Map：

componentScoreMap.set(this.props.id, 新的score值)

需要读取所有值时直接遍历Map即可：

// 拿到所有score的数组
const allScores = Array.from(componentScoreMap.values())
// 按ID取对应组件的score
const targetScore = componentScoreMap.get('scene1')

该方案性能更高，但不会触发React组件重渲染，只适合纯数据存储的场景。

注意点 #

所有复用的子组件必须绑定唯一ID，用来匹配对应存储的score值，避免数据混淆。

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