ReactJS-当我在组件内的选项卡之间切换时，为什么会出现延迟？

我正在开发一个使用ReactJS作为前端的web应用程序。我意识到，当我在我的组件中的选项卡之间切换时，它非常慢，而且往往会滞后（动画不平滑）。我想不出为什么会这样，因为我的组件似乎没有不必要地重新渲染。下面是我的代码片段

class SalesProjectDetail extends Component {

    state = {
    }


    componentDidMount() {
        this.props.initial()
    };

    requirement = (project) => {
        console.log('hi')
        let component = (
            <React.Fragment>
                <RequirementCreateDrawer id={this.props.match.params.id} />
                <RequirementDeleted requirements={project.requirements.filter(requirement => requirement.status === 'inactive')} />
                <RequirementTimeline requirements={project.requirements.filter(requirement => requirement.status === 'active')} />
            </React.Fragment>
        )
        if (this.props.loadingComponent === 'requirement') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    quotation = (project, type) => {
        let component = (type == 'PQ') ?
            (<React.Fragment>
                <QuotationCreateDrawer type="PQ" id={this.props.match.params.id} />
                <QuotationDeleted quotations={project.quotations.filter(quotation => quotation.direction == 'pq').filter(quotation => quotation.status == 'inactive')} type='pq' />
                <QuotationTable quotations={project.quotations.filter(quotation => quotation.direction == 'pq').filter(quotation => quotation.status == 'active')} type='pq' />
            </React.Fragment>)
            :
            (<React.Fragment>
                <QuotationCreateDrawer type="SQ" id={this.props.match.params.id} />
                <QuotationDeleted quotations={project.quotations.filter(quotation => quotation.direction == 'sq').filter(quotation => quotation.status == 'inactive')} type='sq' />
                <QuotationTable quotations={project.quotations.filter(quotation => quotation.direction == 'sq').filter(quotation => quotation.status == 'active')} type='sq' />
            </React.Fragment>)

        if (this.props.loadingComponent === 'quotation') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    notation = (project) => {
        let component = (
            <React.Fragment>
                <NotationList notations={project.notations.filter(notation => notation.status == 'active')} id={project.sales_project_id} />
                <NotationDeleted notations={project.notations.filter(notation => notation.status == 'inactive')} />
            </React.Fragment>
        )
        if (this.props.loadingComponent === 'notation') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    render() {
        console.log('bad')
        const project = this.props.project
        return (
            this.props.loading['salesproject'] === false ?
                <React.Fragment>
                    <Card style={{ height: 'auto', padding: 0, margin: 0 }}>
                        <Row>
                            <Col span={4}>
                                {this.props.loadingComponent === 'project' ?
                                    <Spin size='large'>
                                        <ProjectCard project={project} />
                                    </Spin>
                                    : <ProjectCard project={project} />}
                            </Col>
                            <Col span={20} style={{ backgroundColor: '#fff', padding: '1% 2%' }} >

                                <Tabs defaultActiveKey="0">
                                    <TabPane tab={<span><GithubOutlined />Activities</span>} key="0">
                                        <ActivitiesTimeline project={project} />
                                    </TabPane>
                                    <TabPane
                                        tab={<span><AppleOutlined />Requirements</span>}
                                        key="1"
                                    >
                                        {this.requirement(project)}
                                    </TabPane>


                                    <TabPane
                                        tab={<span><AndroidOutlined />Quotations</span>}
                                        key="2"
                                    >
                                        <Tabs defaultActiveKey="0" tabPosition="left">

                                            <TabPane tab={<span><ClockCircleOutlined /></span>} key="0" >
                                                <QuotationTimeline quotations={project.quotations} />
                                            </TabPane>

                                            <TabPane tab="PQ" key="1">
                                                {this.quotation(project, 'PQ')}
                                            </TabPane>

                                            <TabPane tab="SQ" key="2">
                                                {this.quotation(project, 'SQ')}
                                            </TabPane>
                                        </Tabs>
                                    </TabPane>


                                    <TabPane
                                        tab={<span><WindowsOutlined />Notations</span>}
                                        key="3"
                                    >
                                        {this.notation(project)}
                                    </TabPane>
                                </Tabs>
                            </Col>
                        </Row >
                    </Card>
                    <WorkflowObjectComponent
                        workflow_class={project.workflow_id}
                        {...this.props}
                    />
                </React.Fragment>

                :

                <div style={{ textAlign: 'center' }}><Spin size='large' /></div>
        )
    }

}

const mapStateToProps = state => ({
    loading: state.api.loading,
    project: state.api.project,
    loadingComponent: state.api.loadingComponent
})

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        initial: () => dispatch({ type: 'SALES_PROJECT_DETAIL', id: ownProps.match.params.id })
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(SalesProjectDetail);

class SalesProjectDetail扩展组件{
状态={
}
componentDidMount（）{
this.props.initial（）
};
要求=（项目）=>{
console.log（'hi'）
让组件=(
requirement.status==='inactive'）}/>
requirement.status==='active'）}/>
)
if（this.props.loadingComponent==='requirement'）{
返回(
{component}
)
}
返回组件
}
报价=（项目，类型）=>{
让组件=（类型='PQ'）？
(
QUOTE.direction=='pq'）.filter（QUOTE=>QUOTE.status=='inactive'）}type='pq'/>
QUOTE.direction=='pq'）。过滤器（QUOTE=>QUOTE.status=='active'）}类型='pq'/>
)
:
(
QUOTE.direction=='sq'）。过滤器（QUOTE=>QUOTE.status=='inactive'）}类型=='sq'/>
QUOTE.direction=='sq'）。过滤器（QUOTE=>QUOTE.status=='active'）}类型=='sq'/>
)
if（this.props.loadingComponent=='quote'）{
返回(
{component}
)
}
返回组件
}
符号=（项目）=>{
让组件=(
notation.status=='active'）}id={project.sales\u project\u id}/>
notation.status=='inactive'）}/>
)
if（this.props.loadingComponent==='notation'）{
返回(
{component}
)
}
返回组件
}
render（）{
console.log（'bad'）
const project=this.props.project
返回(
this.props.loading['salesproject']==false？
{this.props.loadingComponent==='project'？
: }
{本要求（项目）}
{this.quote（project，'PQ'）}
{this.quote（project，'SQ'）}
{this.notation（项目）}
:
)
}
}
常量mapStateToProps=状态=>({
加载：state.api.loading，
项目：state.api.project，
loadingComponent:state.api.loadingComponent
})
const mapDispatchToProps=（调度，ownProps）=>{
返回{
初始：（）=>分派（{type:'SALES_PROJECT_DETAIL'，id:ownProps.match.params.id}）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（SalesProjectDetail）；

我注意到，在我使用Redux（reduxsaga）来帮助进行API调用和加载屏幕之后，出现了延迟。但是，由于我的mapStateToProps都是必要的存储状态，因此我没有看到任何不必要的重新渲染，我希望得到一些关于如何继续的建议，当我在选项卡之间切换时，它会滞后，并且选项卡中的子组件不使用任何Redux分派，也不使用任何MapStateTops，因为他们在子组件中使用的数据是作为道具从父组件发送进来的（上面显示的->执行分派以从api获取数据的组件）

感谢大家的帮助，我知道我的问题可能有点模糊，但我真的不知道是什么原因造成了这种滞后，希望我能在这里得到一些帮助，或者给我指出正确的方向，谢谢大家