什么时候componentWillUnmount实际触发

Question

我在玩React生命周期方法，遇到了SeImpersonatePrivilege的一个特殊方面

情节：1

componentWillUnmount

id属性只是用来区分两个元素，现在状态更改后，// this.state.test is false by default render() { let test1 = <Test id="1" /> let test2 = <Test id="2" /> return this.state.test ? test1 : test2 } 变成this.state.test时，将渲染true并删除test1 ，因此我希望test2会以componentWillUnmount的价格触发，由于某种原因它不会触发

Demo

---

情节：2

test2

但是，当组件包装在不同的父元素中时，// this.state.test is false by default render() { let test1 = <div><Test id="1"/></div> let test2 = <React.Fragment><Test id="2"/></React.Fragment> return this.state.test ? test1 : test2 } 会按预期触发。

如果父母双方都是相同的元素类型（两个div标签），则它们也不起作用，也不必一定是div，而我使用p标签按钮标签等尝试过的片段。

Demo

---

问题：

1. 为什么会这样？
2. 如何在不更改父项的情况下触发componentWillUnmount？
3. componentWillUnmount实际何时触发？
4. React组件是否实现单例模式？

Answer 1

React按元素类型和键进行树区分。在第二个示例中，元素类型从Test更改为div。文档中的更多内容：https://reactjs.org/docs/reconciliation.html