Detaillierte Erläuterung der kontrollierten und unkontrollierten Komponenteninstanzen in React

In diesem Artikel werden wir Ihnen eine detaillierte Erläuterung von Beispielen für kontrollierte Komponenten und unkontrollierte Komponenten in React geben. Vor der detaillierten Erklärung stellen wir Ihnen kurz vor, was kontrollierte Komponenten und unkontrollierte Komponenten sind, in der Hoffnung, allen zu helfen.

Kontrollierte Komponente

In React wird jedes Mal, wenn sich der Status des Formulars ändert, in den Status der Komponente geschrieben. Diese Art von Komponente wird in React als Kontrolliert bezeichnet Komponente . In einer kontrollierten Komponente entspricht der Rendering-Status der Komponente ihrem Wert oder ist aktiviert. React eliminiert auf diese Weise den lokalen Zustand von Komponenten. React empfiehlt offiziell die Verwendung kontrollierter Komponenten.

Kontrollierter Komponentenaktualisierungsstatusprozess:

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

Unkontrollierte Komponente

Einfach ausgedrückt: Wenn eine Formularkomponente keine Werteigenschaften hat (Optionsfelder und Kontrollkästchen), entspricht das Kontrollkästchen zu überprüften Requisiten), die als unkontrollierte Komponente bezeichnet werden können. Auf diese Weise können wir defaultValue und defaultChecked verwenden, um den Standardstatus der Komponente darzustellen.

In React ist eine unkontrollierte Komponente ein Anti-Pattern. Ihr Wert wird nicht durch den eigenen Status oder die Requisiten der Komponente gesteuert. Sie müssen ihr normalerweise eine Ref-Requisite hinzufügen . Element.

Vergleich von kontrollierten und unkontrollierten Komponenten

Wir haben gerade gesehen, dass der Standardwert des Formulars durch defaultValue oder defaultChecked festgelegt wird. Es wird nur einmal gerendert Auswirkungen auf nachfolgende Renderings.

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>

In der kontrollierten Komponente kann der im Buch eingegebene Inhalt ausgegeben und angezeigt werden, während wir in der unkontrollierten Komponente, wenn das onChange-Ereignis nicht gebunden ist, alles in das Textfeld eingeben Es wird keine angezeigt. Sie können sehen, dass der größte Unterschied zwischen kontrollierten Komponenten und unkontrollierten Komponenten darin besteht, dass der Zustand unkontrollierter Komponenten nicht durch den Anwendungsstatus gesteuert wird. Es gibt auch lokale Komponentenzustände in der Anwendung, und der Wert der kontrollierten Komponente kommt von Zustand.

• Leistungsprobleme

In kontrollierten Komponenten wird jedes Mal, wenn sich der Wert des Formulars ändert, das aufgerufen Ein einmaliger Wechsel des Prozessors führt zu einem gewissen Leistungsverbrauch. Es wird jedoch nicht empfohlen, kontrollierte Komponenten in React zu verwenden. Dieses Problem kann durch die Redux-Anwendungsarchitektur gelöst werden.

Verwandte Empfehlungen:

Beispielanalyse zum Lebenszyklus einer React-Komponente

Was ist die Lebenszyklusfunktion der React-Komponente

Die umfassendste Möglichkeit, React-Komponenten zu erstellen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der kontrollierten und unkontrollierten Komponenteninstanzen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!