React不使用key prop时如何实现RadioGroup状态同步更新

目前正在开发Radio Group组件，期望实现点击外部按钮触发状态更新后，单选按钮的选中值可同步更新的效果。但当前实现中，只有为组件传入key prop才能达成预期效果，咨询是否存在无需使用key prop即可让组件正常运行的方案。

• 初始状态下点击RadioField下方的按钮，可观察到单选按钮并未跟随传入值同步更新
• 取消App文件中RadioField组件上key prop的注释
• 再次点击RadioField下方的按钮，可观察到单选框已可正常跟随状态更新

传入key能生效的本质，是key变化时React会直接卸载并重新挂载整个组件，强制重置组件内部所有状态，这种方案属于绕开问题的取巧做法，会带来额外性能损耗，还会丢失组件内部的临时状态（比如输入焦点、动画进度、子组件缓存等），不推荐使用。

真正的问题根源是组件实现为半受控模式：首次挂载时用外部传入的value prop初始化了内部的选中状态，但后续没有监听外部value prop的更新，导致外部状态变化时，组件内部存储的选中值没有同步更新，UI自然不会响应变化。

方案1：实现完全受控组件（推荐） #

完全移除组件内部维护的选中值状态，选中状态完全由外部传入的value prop决定，用户操作选中项时直接触发外部传入的onChange回调即可，组件自身不存储选中状态。
参考实现：

const RadioGroup = ({ value, onChange, options }) => {
  return (
    <div className="radio-group">
      {options.map(option => (
        <label key={option.value} className="radio-item">
          <input
            type="radio"
            checked={option.value === value}
            onChange={() => onChange(option.value)}
          />
          {option.label}
        </label>
      ))}
    </div>
  )
}

方案2：实现同时支持受控/非受控的兼容组件 #

如果需要组件同时支持受控（外部传value控制）和非受控（组件自己管状态）两种用法，可以通过useEffect监听外部传入的value变化，当外部value更新时同步更新内部状态即可。
参考实现：

const RadioGroup = ({ 
  value: externalValue, 
  defaultValue, 
  onChange, 
  options 
}) => {
  // 优先用外部传入的受控值，非受控模式下用defaultValue初始化
  const [innerValue, setInnerValue] = useState(externalValue ?? defaultValue);

  // 监听外部受控值的变化，同步到内部状态
  useEffect(() => {
    if (externalValue !== undefined) {
      setInnerValue(externalValue);
    }
  }, [externalValue]);

  const handleSelect = (val) => {
    // 非受控模式下才更新内部状态
    if (externalValue === undefined) {
      setInnerValue(val);
    }
    onChange?.(val);
  };

  return (
    <div className="radio-group">
      {options.map(option => (
        <label key={option.value} className="radio-item">
          <input
            type="radio"
            checked={option.value === innerValue}
            onChange={() => handleSelect(option.value)}
          />
          {option.label}
        </label>
      ))}
    </div>
  )
}

两种方案都不需要依赖key强制重挂载，就能实现选中状态和外部传入值的同步更新。

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