react的import动态引入组件生命周期紊乱？

Question

react对于比较大的组件采用动态引入

type PropTypes = {
    visible: boolean,
};
class Modal extends React.Component<PropTypes, any>{

    constructor(props){
        super(props);
        this.state={
            Child: null,
        };
    }

    componentDidMount(){
        import('./child').then(({default: Child})=>{
            this.setState({Child});
        })
    }

    render(){
        const { visible } = this.props;
        const {Child} = this.state;
        return (Child && visible) ? <Child visible={visible} /> : <Spin />
    }

}

// 子组件
class Child extends React.Component{
    componentDidMount(){
        // 只会执行一次
        console.log('didmount');
    }

    componentDidUpdate(preProps){
        // 不会执行
        console.log(this.props, preProps)
    }

    render(){
        return 'i am child';
    }
}

visible经过打开、关闭、再打开，子组件的didmount只会执行一次，而didUPdate也是只在第一次时执行。这个和之前的认知有区别啊，要怎么做才能实现生命周期正常加载呢。

Answer 1

componentDidMount(){
    import('./child').then(({default: Child})=>{
        this.setState({Child});  // 这里写错了
    })
}

改为

componentDidMount(){
    import('./child').then((module)=>{
        this.setState({Child: module.default});  // 这里写错了
    })
}

Answer 2

生命周期不会紊乱，如果仅看上面的代码，componentDidUpdate也不应该执行，visible置为false，Child直接卸载了，置为true则再次挂载，两次都不会进入更新周期