Please explain in the main concepts that react doesn't refire componentDidMount even with conditional rendering and the solution is to use different keys

As said by someone else here: "This should be way more obvious in the React documentation. This achieved exactly what I was after, but took hours to find."

This also took me hours to find that react doesn't automatically re-mount a component if the code is similar but just props change.

I was using conditional rendering doing:

var mycode = ""
if(a==true) {
      mycode = <MyComponent myvar="true"/>
} else {
      mycode = <MyComponent myvar="false"/>
}

And was expecting componentDidMount to fire to do crucial stuff, which obviously doesn't happen unless you specify a different key for both (solution at the bottom).

Please make this part of the Main Concepts of the React doc. The above linked answer got +190 upvotes which shows that this is a real problem for many coders.

Thank you very much for your consideration

Solution:

var mycode = ""
if(a==true) {
      mycode = <MyComponent myvar="true" key="1"/>
} else {
      mycode = <MyComponent myvar="false" key="2"/>
}

从 React 文档的 Main Concepts 部分开始，issue 将其确定为预期的切入点。说明带有已更改 props 的条件渲染不会重新挂载同一个组件，并记录 issue 中展示的 distinct-key approach；当读者能够清楚理解该行为和解决方案时，即视为完成。