React中同一组件条件渲染未触发componentDidMount问题

React 做同层节点diff对比时，不会因为你把同个组件写在三目运算符的两个分支里，就把它们判定为两个独立组件。
只要两个位置的组件类型完全相同（这里都是TagInputHere），又没有设置能区分身份的key属性，React会直接复用已经挂载好的组件实例，只把新的props传给它，根本不会走卸载旧组件、挂载新组件的流程。
你遇到的场景本质是：首次渲染时toEmail为空，走第二个分支挂载了TagInputHere，已经触发过一次componentDidMount；后续toEmail有值、条件变为true时，React发现还是同类型组件，直接复用实例更新props，自然只会触发componentDidUpdate，不会再跑一次挂载逻辑。

• 方案1：给不同分支的组件设置不同的key值，强制React将其识别为独立实例，切换条件时会自动卸载旧实例、挂载新实例，触发对应生命周期。示例代码：

{
  toEmail.length ? (
    <TagInputHere
      key="has-initial-emails"
      initialValue={toEmail}
    />
  ) : (
    <TagInputHere
      key="no-initial-emails"
    />
  )
}

注意：这种方式会带来组件重挂载的性能开销，如果组件内部状态复杂、渲染成本高，优先选择下面的方案。

• 方案2：优化组件自身的props响应逻辑，从根源上避免依赖重挂载传值。不要把initialValue仅在componentDidMount阶段读取作为初始状态，新增componentDidUpdate逻辑，监听initialValue的props变化，同步更新组件内部状态即可。示例类组件逻辑：

class TagInputHere extends React.Component {
  state = {
    tags: this.props.initialValue || []
  }

  componentDidMount() {
    // 原有挂载逻辑
  }

  componentDidUpdate(prevProps) {
    // 当初始值props变化时，同步更新内部状态
    if (prevProps.initialValue !== this.props.initialValue) {
      this.setState({
        tags: this.props.initialValue || []
      })
    }
  }

  // 其余组件逻辑
}

配合这个优化后，你甚至可以简化条件渲染的写法，不需要写三目分支，直接动态传props即可：

<TagInputHere initialValue={toEmail.length ? toEmail : undefined} />

这种写法没有额外的重挂载开销，是更符合React设计理念的实现方式。

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