Warum verwendet React spezielle Komponenten zum Rendern von Listen?

Denn wenn React große Datensammlungen rendert, muss der Koordinator die von jeder geänderten Sammlung generierten Komponenten auswerten, was sehr ineffizient ist. Die Verwendung spezieller Komponenten zum Rendern von Listen kann die Leistung beim Rendern großer Datensammlungen verbessern, und es werden keine anderen Komponenten gerendert.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Warum React dedizierte Komponenten zum Rendern von Listen verwendet?

Listen in dedizierten Komponenten rendern

Dies ist besonders wichtig beim Rendern großer Datensammlungen. React schneidet beim Rendern großer Datensammlungen sehr schlecht ab, da der Koordinator die resultierenden Komponenten für jede sich ändernde Sammlung auswerten muss. Daher wird empfohlen, eine dedizierte Komponente zum Zuordnen der Sammlung (Array) und zum Rendern dieser Komponente zu verwenden und niemals andere Komponenten zu rendern:

Schlecht:

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}

Im obigen Beispiel ist React nicht erforderlich, wenn sich user.name ändert Koordinieren Sie alle TodoView-Komponenten. Obwohl TodoView-Komponenten nicht erneut gerendert werden, ist der Koordinierungsprozess selbst sehr kostspielig Elemente in der Vorlage;

Verwenden Sie wx:for im Applet, um die Schleifenwiedergabe von Listenelementen in der Vorlage zu implementieren (das heißt, es ist kein v-for erforderlich) und es gibt keinen Befehl System (d. h. kein ähnlicher Mechanismus).

Methode 1: für Schleifendurchquerung

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

Methode 2: Erstellen Sie eine Funktion, um das zugeordnete JSX-Array zurückzugeben Methoden Sie sind Trotzdem, wie im Bild unten gezeigt

Empfohlenes Lernen: „

Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWarum verwendet React spezielle Komponenten zum Rendern von Listen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!