许多受控字段

Question

我一直在努力解决这个问题。我正在创建一个巨大的表单，并希望使用受控组件。唯一的问题是，它变得非常慢，因为我的表格是在我制作的每一次击键时都被重新渲染的。

以下是我的一个字段中10次击键的性能测量：

React-Class（尚未完成）：

class OrderEdit extends Component {
    constructor(params) {
        super(params);

        this.state = {
            activeTab: 1,
            order: null,
            customerValue: '',
            warningTextCustomer: ''
        };

        this.loadOrder();
    }

    loadOrder = () => {
        var me = this;
        new ApiCall()
            .withUrl('orders/edit/' + this.props.serialNumber)
            .onSuccess((order) => {
                me.setState({
                    order: order
                });
            })
            .get();
    };

    validateCustomer = () => {
        return;
        if (!this.state.order.Customer) {
            this.setState({
                warningTextCustomer: 'Bitte gib einen Kunden an.'
            });
        } else {
            this.setState({
                warningTextCustomer: ''
            });
        }
    };

    onCustomerBlur = (event) => {
        //this.validateCustomer();
    };

    onCustomerUpdateItem = (item) => {
        var newOrder = this.state.order;
        newOrder.Customer = item;
        newOrder.Sender = item;
        this.setState({
            order: newOrder
        }, () => this.validateCustomer);
    };

    onCustomerUpdateValue = (value) => {
        this.setState({
            customerValue: value
        });
    };

    onSelectTab = (tabIndex) => {
        this.setState({
            activeTab: tabIndex
        });
    };

    onUpdateDepartureDate = (date) => {
        var newOrder = this.state.order;
        newOrder.DepartureTimeFrom = date;
        this.setState({order: newOrder})
    };

    render() {
        if (!this.state.order) {
            return (<Spinner style={{marginTop: '25%'}}/>);
        }

        return (
            <PageContainer>
                <PageTitle style={{marginBottom: 40}}
                           Title={"Auftrag " + this.state.order.SerialNumber + " bearbeiten"}/>
                <Tabs activeTab={this.state.activeTab} onSelect={this.onSelectTab}>
                    <tab tabIndex={1} title="Allgemein">
                        <Section title="Allgemein">
                            <Row style={{marginBottom: 20}}>
                                <Col xs={12} md={6}>
                                    <AutocompleteFieldCustomer
                                        ref="customer"
                                        title="Kunde"
                                        focusAfterInit={true}
                                        warningText={this.state.warningTextCustomer}
                                        canCreate={true}
                                        value={this.state.customerValue}
                                        valueItem={this.state.order.Customer}
                                        onBlur={this.onCustomerBlur}
                                        onUpdateItem={this.onCustomerUpdateItem}
                                        onUpdateValue={this.onCustomerUpdateValue}
                                        titleElements={this.state.order.Customer.IsNewItem ?
                                            <FieldTitleSuccess title="Kunde wird neu angelegt"/> : null}/>
                                    <FieldNote text="Nicht existierende Kunden werden automatisch angelegt."/>
                                </Col>
                            </Row>
                        </Section>
                        <Section title="Sendung">
                            <Row style={{marginBottom: 20}}>
                                <Col xs={12} md={6}>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={12}>
                                            <AutocompleteFieldCustomer
                                                title="Absender + Beladestation"/>
                                        </Col>
                                    </Row>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={12}>
                                            <LocationField />
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col xs={12} md={6}>
                                            <DateField
                                                title="Datum"/>
                                        </Col>
                                        <Col xs={12} md={6}>
                                            <Row>
                                                <Col xs={12} md={6}>
                                                    <TimeField title="Von"/>
                                                </Col>
                                                <Col xs={12} md={6}>
                                                    <TimeField title="Bis"/>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </Col>
                                <Col xs={12} md={6}>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={12}>
                                            <AutocompleteFieldCustomer
                                                title="Empfänger + Entladestation"/>
                                        </Col>
                                    </Row>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={12}>
                                            <LocationField />
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col xs={12} md={6}>
                                            <TextField title="Datum"/>
                                        </Col>
                                        <Col xs={12} md={6}>
                                            <Row>
                                                <Col xs={12} md={6}>
                                                    <TimeField title="Von"/>
                                                </Col>
                                                <Col xs={12} md={6}>
                                                    <TimeField title="Bis"/>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        </Section>
                        <Section title="Fahrt">
                            <Row style={{marginBottom: 20}}>
                                <Col xs={12} md={6}>
                                    <div style={{marginBottom: 20}}>
                                        <AutocompleteFieldVehicle
                                            title="Fahrzeug"
                                            canCreate={true}/>
                                    </div>
                                    <div style={{marginBottom: 20}}>
                                        <AutocompleteFieldUser
                                            title="Fahrer"
                                            canCreate={true}/>
                                    </div>
                                </Col>
                                <Col xs={12} md={6}>
                                    <AutocompleteFieldCustomer
                                        title="Frachtführer"
                                        canCreate={true}/>

                                </Col>
                            </Row>
                        </Section>
                        <Section title="Fakturierung">
                            <Row style={{marginBottom: 20}}>
                                <Col xs={12} md={6}>
                                    <div style={{marginBottom: 20}}>
                                        <AutocompleteFieldCustomer
                                            title="Rechnungsempfänger Kunde"
                                            canCreate={true}/>
                                    </div>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={6}>
                                            <TextField title="Auftragspreis"/>
                                        </Col>
                                        <Col xs={12} md={6}>
                                            <AutocompleteFieldTax
                                                title="Steuerschlüssel"
                                                canCreate={true}/>
                                        </Col>
                                    </Row>
                                </Col>
                                <Col xs={12} md={6}>
                                    <div style={{marginBottom: 20}}>
                                        <AutocompleteFieldCustomer
                                            title="Gurtschriftempfänger Frachtführer"
                                            canCreate={true}/>
                                    </div>
                                    <Row style={{marginBottom: 20}}>
                                        <Col xs={12} md={6}>
                                            <TextField title="Fahrtpreis"/>
                                        </Col>
                                        <Col xs={12} md={6}>
                                            <AutocompleteFieldTax
                                                title="Steuerschlüssel"
                                                canCreate={true}/>
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        </Section>
                    </tab>
                    <tab tabIndex={2} title="Karte">Tab 3 content</tab>
                </Tabs>
            </PageContainer>
        );
    }
}

有谁知道这方面的解决方案？我一直在阅读很多关于Pure-Render-Mixin，shouldComponentUpdate，Immutable，但我不确定这些是否会对我有所帮助。

感谢