因為react在渲染大型資料集合時，協調器必須評估每個變化的集合所產生的的元件，效率非常低；而使用專門的元件來渲染列表，就可以提高渲染大型資料集合的表現，並且不再渲染其他元件。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
在專用元件中渲染清單
這一點在渲染大型資料集合的時候尤其重要。 React在渲染大型資料集時表現的非常差，因為協調器必須評估每個變化的集合所產生的元件。因此，建議使用專門的元件來映射集合(數組)並且渲染這個元件，切不再渲染其他元件:
不好的:
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>)
}
}在上面範例中，當user. name 改變時，React 會不必要的協調所有的TodoView 元件. 儘管TodoView元件不會重新渲染，但是協調的過程本身就非常昂貴.
好的：
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 實作範本中的列表項目循環渲染；
小程式中使用wx:for 實作範本中的列表項目循環渲染；
React中沒有模板（即不需要v-for），也沒有指令系統（即沒有提供類似的機制）。
方法1: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>
)
}
}方法2：建立函數傳回映射後的JSX陣列
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>
)
}
}方法3：直接綁定映射後的JSX陣列
{
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>
)
}
}以上幾種方法出來的結果都是一樣的,如下圖所示
react影片教學》
以上是為什麼react要用專門的元件來渲染列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
