Einführung in die Methode zum Rendern von Listen in React (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Rendern von Listen in React (mit Code). Ich hoffe, er wird Ihnen als Referenz dienen.

Für eine Anzeigeseite gibt es normalerweise mehrere Anzeigezustände (nehmen Sie die Listenseite als Beispiel):

Daten sind leer, leere Seite
Beim Abrufen der Daten ist ein Fehler aufgetreten, Fehler Seite
Daten sind normal
Ladestatus
Angesichts der oben genannten drei Situationen muss React beim Rendern der Liste die entsprechende Ansicht korrekt beurteilen und rendern, was sich vom bedingten Rendern von vue unterscheidet , v- Die von Frameworks wie show bereitgestellten APIs und das bedingte Rendering von React sind alle native JS mit einem kleinen Hack. Zum Beispiel, wie im React-Dokument erwähnt

Natürlich sind dies einige häufig verwendete Methoden, aber es gibt auch verschiedene Probleme. Wenn beispielsweise zu viele bedingte Verzweigungen vorhanden sind, wird der Code immer chaotischer. Hier sind mehrere universelle Methoden >

if/else, ternäre und Kurzschlussoperatoren

Diese drei Methoden werden in den offiziellen Dokumenten erwähnt und hier zusammengefasst. Tatsächlich sind diese drei Lösungen ähnlich: Treffen Sie entsprechende Urteile Im Render-Lebenszyklus können jedoch Ternär- und Kurzschlussoperatoren in jsx-Zeilen verwendet werden.

if/else

class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status } = this.props
    if (status === 'loading') {
      return <div>
        加载状态
      </div>
    } 
    
    if (status === 'error') {
      return  <div>
        错误状态
      </div>
    }


    if (status === 'success') {
      return  <div>
        成功状态
      </div>
    }

    if (status === 'empty') {
      return  <div>
        空状态
      </div>
    }
  }
}

Sie können sehen, dass diese Schreibmethode klarer und klarer ist. Wenn jedoch immer mehr Beurteilungszweige erstellt werden, wird der Code zwangsläufig sehr überflüssig und die Wiederverwendbarkeit wird ebenfalls besorgniserregend sein

Render (IF)-Komponente

Das Rendern hier ist natürlich nicht Teil des Lebenszyklus Zum Rendern können wir v-if in vue entsprechen

function Render ({ if: cond, children }) {
    return cond ? children : null
}

Das Obige ist eine einfache Render-Komponente und sieht bei Verwendung so aus

class List extends Component {
    static propTypes = {
        status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
    }
    
  render () {
    const { status }  = this.props
    return (
      <div>
        <Render if={status === &#39;loading&#39;} >
          加载状态
        </Render>

        <Render if={status === &#39;error&#39;} >
          错误状态
        </Render>

        <Render if={status === &#39;success&#39;} >
          成功状态
        </Render>

        <Render if={status === &#39;empty&#39;} >
          空状态
        </Render>
      </div>
    )
    }
}

Verglichen mit der Verwendung Vieles, wenn in render /else Die obige Schreibmethode ist zweifellos klarer. Wenn alle Geschäftskomponenten der Liste vereinheitlicht sind und der Status konsistent bleibt, können wir eine höhere Abstraktionsebene erreichen und andere Status in eine Funktion höherer Ordnung abstrahieren Code schreiben Stellen Sie einfach sicher, dass der Erfolgsstatus korrekt gerendert werden kann

Führen Sie die Funktion sofort aus

Es ist möglich, Variablen in jsx zu schreiben, und es ist auch möglich, die Funktion sofort auszuführen

class List extends Component {
  static propTypes = {
      status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status }  = this.props
    return (
      <div>
        {(() => {
          switch (status) {
            case 'loading':
              return <div>加载状态</div>
            
            case 'error':
              return <div>错误状态</div>
            
            case 'success':
              return <div>成功状态</div>
            
            case 'empty':
              return <div>空状态</div>
          }
        })()}
      </div>
    )
  }
}

Replikation der unmittelbaren Funktion Die Verwendung ist offensichtlich nicht praktisch, daher sind die anwendbaren Szenarien für unmittelbare Funktionen Komponenten, die relativ komplex sind, aber nicht wiederverwendet werden können

Komponenten höherer Ordnung

Ich werde nicht näher auf das Konzept der Komponenten höherer Ordnung eingehen. Zusätzlich zur Abstraktion der Logik können wir auch die Wiederverwendungsrate von Komponenten verbessern.

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return <div>加载状态</div>
        
        case 'error':
          return <div>错误状态</div>
        
        case 'success':
          return <WrappedComponent {...this.props}/>
        
        case 'empty':
          return <div>空状态</div>
      }
    }
  }
}

Wenn wir sicherstellen können, dass die Requisiten aller Listen konsistent sind (das heißt, sie werden alle zur Bestimmung des Status verwendet), können wir uns vollständig auf das Schreiben von Status als Erfolgsstatus konzentrieren:

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    return (
      <div>
        成功页面
      </div>
    )
  }
}

Zweitens können wir den Lade-, Fehler- und Leerstatus in Komponenten extrahieren, was zweifellos eine Rolle bei der Verbesserung der Wiederverwendungsrate von Komponenten spielt.

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Rendern von Listen in React (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!