componentWillUnmount 如何在 React 中工作

有两个组件，每个组件都有一个 componentWillUnmount 方法：

class Ul extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listItems: ['first', 'second', 'third'],
            input: '',
        };
    }

    componentWillUnmount() {
        console.log('LifeCycle[unmounting]: componentWillUnmount UL COMPONENT');
    }

    delete = () => {
        this.setState({
            listItems: [],
        });
    };

    render() {
        if (!this.state.listItems.length) return null;

        return (
            <>
                <ul>
                    <Li listItems={this.state.listItems} />
                </ul>
                <button onClick={this.delete}>Delete</button>
            </>
        );
    }
}

class Li extends React.Component {
    componentWillUnmount() {
        console.log('LifeCycle[unmounting]: componentWillUnmount LI COMPONENT');
    }

    items = this.props.listItems.map((item, id) => (
        <li key={id}>
            {item}
        </li>
    ));

    render() {
        return <>{this.items}</>;
    }
};

如果单击“删除”按钮，则状态将更改（数组将被清除），并且在重新渲染时，代码会遇到以下情况：

if (!this.state.listItems.length) return null;

这将显示在控制台中 - LifeCycle[unmounting]: componentWillUnmount LI COMPONENT 我预计 UL 组件会收到类似的消息，但没有收到。

据我了解，这是因为 UL 组件中的渲染函数仍然执行，这意味着该组件的生命周期方法如下：

更新：getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate

即它是针对处于Update状态而不是Unmounting的 UL 组件，这就是为什么没有理由调用componentWillUnmount方法的原因。虽然控制根本没有到达 LI 组件，但它调用了componentWillUnmount方法。也就是当前组件的componentWillUnmount如果已经到了里面的render函数就不会被调用了？

还有一个问题：如果在返回的UL 组件中第一个条件不为null，那么会调用该组件的componentWillUnmount 方法。看起来，最后，但控制台中只会引起两三个错误。为什么会这样？