Question

我对React（^ 16.6.0）相当陌生。我经常使用带有React.Component的{{1}}。有时，我可能在此方法中使用更大的组件，因此，为了减轻代码的负担并提高可读性，我将大块代码放入自己的方法中。这很好用，并且在可读性上也做得很好。我的问题是，这是否是一种好习惯？新方法返回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 />;
        }
    }
}

Answer 1

我认为都是一样的。如果您获得的程序更干净，并且可读性和可维护性比更好。

考虑这样一种方式，您可以用createElement（）函数调用替换每个JSX表达式。如果您这样看，您将意识到，区别只是几个函数调用。与这种微小的性能下降相比，优先考虑的是可读性要高得多。

使用JSX.Element是一种好习惯吗？

1 个答案: