Wie rendert man Arrays in React effizient?

React-Array-Rendering leicht gemacht

Das Rendern einer Liste von Elementen in React ist eine häufige Aufgabe. So machen Sie es effizient:

Erste Methode:

<code class="javascript">render() {
    const data =[{&quot;name&quot;:&quot;test1&quot;},{&quot;name&quot;:&quot;test2&quot;}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
    
    return (
      <div>{listItems}</div>
    );
  }</code>

Diese Methode beinhaltet das Erstellen eines Arrays von React-Elementen und deren anschließendes Rendern in einem Container-Div.

Zweite Methode:

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

Diese Methode verwendet die Map-Funktion direkt in der Return-Anweisung, was die Syntax vereinfacht.

Eine dieser Methoden kann je nach Wunsch zum Rendern von Objektarrays in React verwendet werden.

Das obige ist der detaillierte Inhalt vonWie rendert man Arrays in React effizient?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!