Pourquoi React utilise-t-il des composants spéciaux pour afficher les listes ?

Parce que lorsque React rend de grandes collections de données, le coordinateur doit évaluer les composants générés par chaque collection modifiée, ce qui est très inefficace. L'utilisation de composants spécialisés pour restituer des listes peut améliorer les performances de rendu de grandes collections de données, et aucun autre composant n'est rendu.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Pourquoi React utilise des composants dédiés pour restituer des listes

Render les listes dans des composants dédiés

Ceci est particulièrement important lors du rendu de grandes collections de données. React fonctionne très mal lors du rendu de grandes collections de données, car le coordinateur doit évaluer les composants résultants pour chaque collection changeante. Par conséquent, il est recommandé d'utiliser un composant dédié pour mapper la collection (tableau) et restituer ce composant, et de ne jamais restituer d'autres composants :

Mauvais :

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

Dans l'exemple ci-dessus, lorsque user.name change, React sera inutile Coordonnez tous les composants TodoView. Bien que le composant TodoView ne soit pas restitué, le processus de coordination lui-même est très coûteux

Bon :

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

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

Rendu de liste dans React

implémenté à l'aide de v-for dans Vue.js Rendu en boucle de. lister les éléments dans le modèle ;

Utilisez wx:for dans l'applet pour implémenter le rendu en boucle des éléments de la liste dans le modèle ;

Il n'y a pas de modèle dans React (c'est-à-dire qu'il n'y a pas besoin de v-for) ; système de commande (c’est-à-dire aucun mécanisme similaire).

Méthode 1 : parcours de boucle for

import React, { Component } from 'react'
export default class App extends Component {
// 假设服务器端返回如下
state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
booklist(){
// 把服务器端返回的字符串数组转换为JSX数组
let arr=[]
for(let i=0;i<this.state.books.length;i++){
arr.push( <li key={i}>《{this.state.books[i]}》</li> )
}
return arr
}
render() {
return (
<div>
<ul>
{this.booklist()}
</ul>
</div>
)
}
}

Méthode 2 : Créer une fonction pour renvoyer le tableau JSX mappé

showList(){
return   this.state.list.map( (e,i)=>JSX )
}
{this.showList() }

import React, { Component } from 'react'
export default class App extends Component {
// 假设服务器端返回如下
state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
booklist(){
// 把服务器端返回的字符串数组转换为JSX数组
return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
render() {
return (
<div>
<ul>
{this.booklist()}
</ul>
</div>
)
}
}

Méthode 3 : lier directement le tableau JSX mappé

{
this.state.list.map( (e,i)=>JSX )
}

import React, { Component } from 'react'
export default class App extends Component {
// 假设服务器端返回如下
state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
render() {
return (
<div>
<ul>
{/*this.booklist()*/}
{
/*此处不能急 编写for循环——for不是表达式*/
this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
</ul>
</div>
)
}
}

Les résultats des méthodes ci-dessus Ils sont tout de même, comme le montre l'image ci-dessous

Apprentissage recommandé : "tutoriel vidéo React"

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!