条件渲染同一输入组件时不同defaultValue引发异常的原因是什么？

注意： 本问题旨在理解为何此代码会出现该行为，而非寻求实现预期效果的替代代码。

我自定义了一个用于表单字段的组件，希望根据不同条件渲染它并传入不同props（实际场景中props差异更多，此处简化为仅defaultValue不同），示例代码如下：

function DummyInput({defaultValue}) {
  console.log(defaultValue)
  return (
    <input defaultValue={defaultValue}/>
  )
}

function Picker({setContentOption}){
  const handleOptionChange = (event) => {
    setContentOption(event.target.value);
  };
  return (
    <div>
      <select onChange={handleOptionChange}>
        <option value="content-A">content-A</option>
        <option value="content-B">content-B</option>
        <option value="content-C">content-C</option>
      </select>
    </div>
  )
}

function App() {
  const [contentOption, setContentOption] = React.useState('content-A')
  let inputField = null
  
  if (contentOption === 'content-A'){
    inputField = <DummyInput defaultValue="A"></DummyInput>
  } else if (contentOption === 'content-B'){
    inputField = <DummyInput defaultValue="B"></DummyInput>
  } else if (contentOption === 'content-C'){
    inputField = <DummyInput defaultValue="C"></DummyInput>
  }
  
  return (
    <div>
      <div>注意控制台会打印三次，这意味着三种情况的代码都执行了，但只有第三种方式会重新渲染组件</div>
      <br/>
      <Picker setContentOption={setContentOption}/>
      <br/>
      
      <div>无效 - 函数体内的if/else语句方式</div>
      {inputField}
      
      <div>无效 - 内联if/else语句方式</div>
      {(contentOption === 'content-A') && (
        <DummyInput defaultValue="A"></DummyInput>
      ) || (contentOption === 'content-B') && (
        <DummyInput defaultValue="B"></DummyInput>
      ) || (contentOption === 'content-C') && (<DummyInput defaultValue="C"></DummyInput>)}
      
      <div>有效 - 三个独立的内联if语句方式</div>
      {contentOption === 'content-A' && <DummyInput defaultValue="A"></DummyInput>}
      {contentOption === 'content-B' && <DummyInput defaultValue="B"></DummyInput>}
      {contentOption === 'content-C' && <DummyInput defaultValue="C"></DummyInput>}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

该应用根据父组件App的contentOption状态，渲染带有不同defaultValue的DummyInput组件。我原本预期无论使用哪种条件渲染方式，defaultValue都会随状态变化而更新，但发现：

• 通过if-else语句将组件赋值给inputField变量、使用内联或运算的条件渲染这两种方式均不生效
• 使用三个独立的&&条件渲染时组件能正常更新

在DummyInput中添加console.log后发现，即使组件未用更新后的defaultValue重新渲染，组件内部代码仍会执行。

此外，为DummyInput添加key属性后问题解决，但我不理解为何在非map场景下需要key，也不清楚为何三个独立的&&条件渲染能生效。希望了解该行为的原因，避免在其他场景中出现类似问题。

相关问题 #

本问题与两个Stack Overflow问题类似。

内容的提问来源于Stack Exchange，提问作者Manuel Lera Ramírez