Reactjs 使用JSX.Element是一种好的实践吗？

我对反应相当陌生（^16.6.0）。我经常使用

React.Component

，它具有

render（）

。有时我可能会在这个方法中有更大的部分，所以为了减轻代码的负担并提高可读性，我在它们自己的方法中加入了大块。这很有效，并且在可读性方面也做得很好。我的问题是，这是否是一种好的做法？新方法返回的

JSX.Element

，性能是否良好

前面的代码示例：

export class AreaDistinguisher extends React.Component<AreaDistinguisherProps, {}> {
    public render() {
        switch (this.props.targetDisplay) {
            case "page":
                return <PageDisplay2    id={this.props.targetId}
                                        onRelatedMenusChanged={(relatedMenus: RelatedMenu[]) => this.props.onRelatedMenusChanged(relatedMenus)} />;
            case "report":
                return <Report2Display />;
            case "tour":
                return <TourDisplay menu={this.props.menu} />;
            default:
                return <div />;
        }
    }
}

导出类AreaDiscriminator扩展React.Component{
公共渲染（）{
开关（此.props.targetDisplay）{
案例“第页”：
返回此.props.onRelatedMenusChanged（relatedMenus）}/>；
案例“报告”：
返回；
“巡回”案例：
返回；
违约：
返回；
}
}
}

下面的代码示例：

export class AreaDistinguisher extends React.Component<AreaDistinguisherProps, {}> {
    public render() {
        switch (this.props.targetDisplay) {
            case "page":
                return this.buildPageDisplay();
            case "report":
                return this.buildReportDisplay();
            case "tour":
                return this.buildTourDisplay();
            default:
                return <div />;
        }
    }

    private buildPageDisplay(): JSX.Element {
        return <PageDisplay2    id={this.props.targetId}
                                onRelatedMenusChanged={(relatedMenus: RelatedMenu[]) => this.props.onRelatedMenusChanged(relatedMenus)} />;
    }

    private buildReportDisplay(): JSX.Element {
        return <Report2Display />;
    }

    private buildTourDisplay(): JSX.Element {
        return <TourDisplay menu={this.props.menu} />;
    }
}

导出类AreaDiscriminator扩展React.Component{
公共渲染（）{
开关（此.props.targetDisplay）{
案例“第页”：
返回这个.buildPageDisplay（）；
案例“报告”：
返回此.buildReportDisplay（）；
“巡回”案例：
返回这个.buildTourDisplay（）；
违约：
返回；
}
}
私有buildPageDisplay（）：JSX.Element{
返回此.props.onRelatedMenusChanged（relatedMenus）}/>；
}
私有buildReportDisplay（）：JSX.Element{
返回；
}
私有buildTourDisplay（）：JSX.Element{
返回；
}
}

我认为一切都一样。如果你得到了一个更干净、可读性和可维护性更好的程序

---

考虑用createElement（）函数调用替换每个JSX表达式的方法。如果你这样想的话，你会意识到，区别只是多了几个函数调用。可读性在我的优先级中比这个微小的性能下降要高得多。

我认为这一切都是一样的。如果你得到了一个更干净、可读性和可维护性更好的程序

考虑用createElement（）函数调用替换每个JSX表达式的方法。如果你这样想的话，你会意识到，区别只是多了几个函数调用。在我看来，可读性比这微小的性能下降要重要得多