Mengapa bertindak balas menggunakan komponen khas untuk membuat senarai?-Soal Jawab bahagian hadapan-php.cn

Mengapa bertindak balas menggunakan komponen khas untuk membuat senarai?

WBOY

Lepaskan： 2022-05-05 10:47:01

asal

1955 orang telah melayarinya

Oleh kerana apabila bertindak balas menghasilkan pengumpulan data yang besar, penyelaras mesti menilai komponen yang dijana oleh setiap koleksi yang diubah, yang sangat tidak cekap menggunakan komponen khusus untuk memaparkan senarai boleh meningkatkan prestasi pengumpulan data yang besar, dan tidak lagi menghasilkan komponen lain.

Mengapa bertindak balas menggunakan komponen khas untuk membuat senarai?

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Mengapa bertindak balas menggunakan komponen khusus untuk memaparkan senarai

Memaparkan senarai dalam komponen khusus

Ini amat penting apabila memaparkan pengumpulan data yang besar. React berprestasi sangat teruk apabila memaparkan koleksi data yang besar kerana penyelaras mesti menilai komponen yang terhasil untuk setiap koleksi yang berubah. Oleh itu, adalah disyorkan untuk menggunakan komponen khusus untuk memetakan koleksi (tatasusunan) dan menjadikan komponen ini, dan jangan sekali-kali menjadikan komponen lain:

Buruk:

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

Salin selepas log masuk

Dalam contoh di atas, apabila Apabila nama pengguna berubah, React tidak perlu menyelaraskan semua komponen TodoView Walaupun komponen TodoView tidak akan dipaparkan semula, proses penyelarasan itu sendiri sangat mahal:

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

Salin selepas log masuk

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

Salin selepas log masuk

Perenderan senarai dalam React

V-for digunakan dalam Vue.js untuk melaksanakan pemaparan gelung item senarai dalam templat

wx digunakan dalam applet :untuk melaksanakan pemaparan kitaran item senarai dalam templat

Tiada templat dalam React (iaitu, tidak memerlukan v-for), dan tiada sistem arahan (iaitu, tiada mekanisme yang serupa adalah disediakan).

Kaedah 1: untuk lintasan gelung

Kaedah 2: Buat fungsi untuk mengembalikan tatasusunan JSX yang dipetakan

import React, { Component } from &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
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>
)
}
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Kaedah 3: Ikat terus tatasusunan JSX yang dipetakan

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

Salin selepas log masuk

Keputusan kaedah di atas adalah sama, seperti yang ditunjukkan dalam rajah di bawah

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

Salin selepas log masuk

Mengapa bertindak balas menggunakan komponen khas untuk membuat senarai? Pembelajaran yang disyorkan: "

tutorial video bertindak balas

Atas ialah kandungan terperinci Mengapa bertindak balas menggunakan komponen khas untuk membuat senarai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!