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

唯见长江天际流
  • 646
北京市

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也是只在第一次时执行。这个和之前的认知有区别啊,要怎么做才能实现生命周期正常加载呢。

回复
阅读 382
2 个回答
componentDidMount(){
    import('./child').then(({default: Child})=>{
        this.setState({Child});  // 这里写错了
    })
}

改为

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏