React父组件嵌入多个同种子组件向上传值的最佳实践

完全不需要因为要渲染多个同组件实例就拆分独立组件。React组件的设计初衷就是可复用，组件实例的内部state、闭包逻辑默认是完全隔离的，你做的随机数测试结果完全符合React的设计预期，不存在天然的状态冲突问题。你描述的两个标签页98%功能重合的场景，复用同一个组件是最优选择，拆分反而会增加冗余维护成本。

你之前看到的几个容易混淆的说法，都有明确的适用边界，不是多实例渲染的强制要求：

• 「要给不同实例传不同id、给内部DOM id加前缀」：这个和React识别组件实例没有任何关系，只是为了符合HTML全局id必须唯一的规范要求。
  如果你组件内部没有用到DOM id的场景（比如label关联input、aria无障碍属性绑定、锚点跳转这类），完全不需要额外处理；如果确实需要用到id，实现非常简单：给组件传入一个唯一的实例标识prop（比如instanceId），内部拼接成唯一id即可，不需要引入复杂的上下文。示例：

  // 父组件传值
  <Child1 instanceId="tab1" changeName={changeNameFunc} />
  <Child1 instanceId="tab2" changeName={changeNameFunc} />
  
  // 子组件内部用
  <div>
    <label htmlFor={`txtName-${props.instanceId}`}>名称</label>
    <input type="text" id={`txtName-${props.instanceId}`} />
  </div>
  

• 「要给子组件加id/key属性让React识别实例唯一性」：这个是动态列表渲染场景的要求。如果你是像示例里那样静态写死两个子组件，React自己能区分实例，不需要额外加属性；如果是通过map循环渲染的多实例，才需要给每个实例加唯一的key属性，帮助React做diff更新，这个key只服务于React的协调算法，和组件内部状态隔离没有关系。注意循环渲染时不要用数组下标当key，尤其是列表存在增删、排序操作的场景，会导致实例识别错误、状态错位。

按照React的数据流规范写，完全不会出现状态冲突：

1. 彻底抛弃原生DOM操作的写法，所有表单值、内部状态全部用React的状态管理（受控组件、useState/useRef）实现，从根源上避免DOM id重复导致的取值错误。比如input取值不要用document.getElementById，直接绑定onChange更新自身state：

   const Child1 = (props) => {
     const [name, setName] = useState('');
     return (
       <div>
         <input 
           type="text" 
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
         <button onClick={() => props.changeName(props.instanceId, name)}>
           Send To Parent
         </button>
       </div>
     )
   }
   

2. 如果父组件需要区分值来自哪个实例，直接在回调参数里把实例标识一起传回去即可，不需要额外的全局状态或者上下文。父组件接收的时候可以按实例标识存储对应的值：

   const Parent1 = () => {
     const [childValues, setChildValues] = useState({})
     const changeNameFunc = (instanceId, childName) => {
       setChildValues(prev => ({...prev, [instanceId]: childName}))
     };
   
     return (
       <div>
         Parent
         <div>
           <Child1 instanceId="1" changeName={changeNameFunc} />
           <Child1 instanceId="2" changeName={changeNameFunc} />
         </div>
       </div>
     );
   };
   

3. 你提到的标签页微小差异（部分控件显隐、文本不同），直接通过props控制即可，比如传showAdvanceControl={false}、tabTitle="基础配置"这类prop，子组件内部按prop判断渲染逻辑就行，完全不需要拆分组件。

• 不要在组件函数外部声明可变变量存储状态，比如在Child1组件的外层作用域写let sharedValue = ''，这种变量会被所有组件实例共享，必然会出现状态串流。所有实例私有的状态必须存在组件内部的useState/useRef中。
• 如果使用了Context，注意Provider的包裹层级，不要不小心把多个实例包在同一个持有共享可变状态的Provider下，正常业务开发如果没有手动嵌套Provider不会遇到这个问题。
• 不要为了“方便”把本该存在子组件内部的状态全部提到父组件管理，除非父组件确实需要跨实例共享这些值，否则徒增复杂度，还容易因为状态命名冲突导致串值。

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