本教程操作环境：windows10系统、react17.0.1版、dell g3电脑。
为什么react要用专门的组件来渲染列表在专用组件中渲染列表
这点在渲染大型数据集合的时候尤为重要。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要用专门的组件来渲染列表的详细内容。