react要用專(zhuān)門(mén)的組件來(lái)渲染列表的原因是什么

這篇文章主要介紹“react要用專(zhuān)門(mén)的組件來(lái)渲染列表的原因是什么”，在日常操作中，相信很多人在react要用專(zhuān)門(mén)的組件來(lái)渲染列表的原因是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”react要用專(zhuān)門(mén)的組件來(lái)渲染列表的原因是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

因?yàn)閞eact在渲染大型數(shù)據(jù)集合時(shí)，協(xié)調(diào)器必須評(píng)估每個(gè)變化的集合所產(chǎn)生的的組件，效率非常低；而使用專(zhuān)門(mén)的組件來(lái)渲染列表，就可以提高渲染大型數(shù)據(jù)集合的表現(xiàn)，并且不再渲染其他組件。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

為什么react要用專(zhuān)門(mén)的組件來(lái)渲染列表

在專(zhuān)用組件中渲染列表

這點(diǎn)在渲染大型數(shù)據(jù)集合的時(shí)候尤為重要。React在渲染大型數(shù)據(jù)集合時(shí)表現(xiàn)的非常差，因?yàn)閰f(xié)調(diào)器必須評(píng)估每個(gè)變化的集合所產(chǎn)生的組件。因此，建議使用專(zhuān)門(mén)的組件來(lái)映射集合(數(shù)組)并且渲染這個(gè)組件，切不再渲染其他組件:

不好的:

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

在上面例子中，當(dāng) user.name 改變時(shí)，React 會(huì)不必要的協(xié)調(diào)所有的 TodoView 組件. 盡管TodoView組件不會(huì)重新渲染，但是協(xié)調(diào)的過(guò)程本身就非常昂貴.

好的：

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

React中的列表渲染

Vue.js中使用v-for 實(shí)現(xiàn)模板中的列表項(xiàng)循環(huán)渲染；

小程序中使用 wx:for 實(shí)現(xiàn)模板中的列表項(xiàng)循環(huán)渲染；

React中沒(méi)有模板（即不需要v-for），也沒(méi)有指令系統(tǒng)（即沒(méi)有提供類(lèi)似的機(jī)制）。

方法1:for循環(huán)遍歷

import React, { Component } from 'react'
export default class App extends Component {
// 假設(shè)服務(wù)器端返回如下
state={books:['巴黎圣母院','悲慘世界','愛(ài)的教育','簡(jiǎn)·愛(ài)','鋼鐵是怎樣煉成的','安徒生童話(huà)']}
booklist(){
// 把服務(wù)器端返回的字符串?dāng)?shù)組轉(zhuǎn)換為JSX數(shù)組
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>
)
}
}

方法2：創(chuàng)建函數(shù)返回映射后的JSX數(shù)組

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

import React, { Component } from 'react'
export default class App extends Component {
// 假設(shè)服務(wù)器端返回如下
state={books:['巴黎圣母院','悲慘世界','愛(ài)的教育','簡(jiǎn)·愛(ài)','鋼鐵是怎樣煉成的','安徒生童話(huà)']}
booklist(){
// 把服務(wù)器端返回的字符串?dāng)?shù)組轉(zhuǎn)換為JSX數(shù)組
return this.state.books.map( (b,i)=> <li key={i}>《》</li> )
}
render() {
return (
<div>
<ul>
{this.booklist()}
</ul>
</div>
)
}
}

方法3：直接綁定映射后的JSX數(shù)組

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

import React, { Component } from 'react'
export default class App extends Component {
// 假設(shè)服務(wù)器端返回如下
state={books:['巴黎圣母院','悲慘世界','愛(ài)的教育','簡(jiǎn)·愛(ài)','鋼鐵是怎樣煉成的','安徒生童話(huà)']}
render() {
return (
<div>
<ul>
{/*this.booklist()*/}
{
/*此處不能急 編寫(xiě)for循環(huán)——for不是表達(dá)式*/
this.state.books.map( (b,i)=> <li key={i}>《》</li> )
}
</ul>
</div>
)
}
}

以上幾種方法出來(lái)的結(jié)果都是一樣的,如下圖所示

到此，關(guān)于“react要用專(zhuān)門(mén)的組件來(lái)渲染列表的原因是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！