Introduction à la méthode de rendu de liste dans React (avec code)

Cet article vous apporte une introduction à la méthode de rendu des listes dans React (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pour une page d'affichage, il existe généralement plusieurs états d'affichage (prenons la page de liste comme exemple) :

Les données sont vides, page vide
Une erreur s'est produite lors de la récupération des données, erreur Page
Les données sont normales
État de chargement
Compte tenu des trois situations ci-dessus, lorsque React rend la liste, il doit correctement juger et restituer la vue correspondante, ce qui est un rendu conditionnel différent du v-if de vue. , v- L'API fournie par des frameworks tels que show et le rendu conditionnel de React sont tous des js natifs avec un petit hack Par exemple, comme mentionné dans le document React if/else, && et sanmu, etc.

Bien sûr, les méthodes ci-dessus sont couramment utilisées, mais il existe également divers problèmes. Par exemple, lorsqu'il y a trop de branches conditionnelles, le code deviendra de plus en plus compliqué. Voici plusieurs méthodes universelles

Opérateurs if/else, ternaires et de court-circuit

Ces trois méthodes sont mentionnées dans les documents officiels et sont rassemblées ici. En fait, ces trois solutions sont similaires : Faire des jugements correspondants. dans le cycle de vie du rendu, cependant, les opérateurs ternaires et de court-circuit peuvent être utilisés dans les lignes jsx

if/else

Vous pouvez voir que cette méthode d'écriture est meilleure que clear. C'est clair, mais si de plus en plus de branches de jugement sont faites, le code sera forcément très redondant, et la réutilisabilité est également inquiétante

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>
    }
  }
}

Composant de rendu (IF)

Le rendu ici est de. bien sûr pas la vie. Render dans le cycle, on peut correspondre à v-if dans vue

Ce qui précède est un simple composant Render, et il s'utilise comme ça

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

Par rapport à l'utilisation de beaucoup de if/else dans le rendu, c'est sans aucun doute plus clair. Si tous les composants métier de la liste sont unifiés et que l'état est cohérent, nous pouvons faire un niveau d'abstraction plus élevé et abstraire d'autres états dans une fonction d'ordre supérieur. nous écrivons du code, nous devons seulement nous assurer que le statut de réussite peut être rendu correctement

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>
    )
    }
}

Exécuter la fonction immédiatement

Vous pouvez écrire des variables en jsx, et vous pouvez également exécuter la fonction immédiatement

La réutilisation de fonctions immédiates n'est évidemment pas réaliste, donc les scénarios applicables pour les fonctions immédiates sont des composants relativement complexes mais non réutilisés

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>
    )
  }
}

Composants d'ordre élevé

Pour les composants d'ordre élevé, je n'entrerai pas dans les détails du concept de composants. Nous mettons la logique du rendu conditionnel dans des composants d'ordre élevé, nous pouvons également améliorer le taux de réutilisation des composants.

Si nous pouvons nous assurer que les accessoires de toutes les listes sont cohérents (c'est-à-dire que le statut est utilisé pour déterminer le statut), nous pouvons nous concentrer entièrement sur l'écriture du statut comme statut de réussite :

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>
      }
    }
  }
}

Deuxièmement, nous pouvons déduire uniformément le chargement, les erreurs et l'état vide. Les composants peuvent sans aucun doute jouer un rôle important dans l'amélioration du taux de réutilisation des composants.

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

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!