react要用专门的组件来渲染列表的原因是什么

这篇文章主要介绍“react要用专门的组件来渲染列表的原因是什么”，在日常操作中，相信很多人在react要用专门的组件来渲染列表的原因是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react要用专门的组件来渲染列表的原因是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联服务项目包括南木林网站建设、南木林网站制作、南木林网页制作以及南木林网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，南木林网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到南木林省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

因为react在渲染大型数据集合时，协调器必须评估每个变化的集合所产生的的组件，效率非常低；而使用专门的组件来渲染列表，就可以提高渲染大型数据集合的表现，并且不再渲染其他组件。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

为什么react要用专门的组件来渲染列表

在专用组件中渲染列表

这点在渲染大型数据集合的时候尤为重要。React在渲染大型数据集合时表现的非常差，因为协调器必须评估每个变化的集合所产生的组件。因此，建议使用专门的组件来映射集合(数组)并且渲染这个组件，切不再渲染其他组件:

不好的:

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (

            {user.name}
            

                {todos.map(todo => )}
            
        
)
    }
}

在上面例子中，当 user.name 改变时，React 会不必要的协调所有的 TodoView 组件. 尽管TodoView组件不会重新渲染，但是协调的过程本身就非常昂贵.

好的：

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (

            {user.name}
            
        
)
    }
}

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return 

            {todos.map(todo => )}
        
)
    }
}

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[i]}》 )
}
return arr
}
render() {
return (


{this.booklist()}


)
}
}

方法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)=> 《{b}》 )
}
render() {
return (


{this.booklist()}


)
}
}

方法3：直接绑定映射后的JSX数组

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

import React, { Component } from 'react'
export default class App extends Component {
// 假设服务器端返回如下
state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
render() {
return (


{/*this.booklist()*/}
{
/*此处不能急 编写for循环——for不是表达式*/
this.state.books.map( (b,i)=> 《{b}》 )
}


)
}
}

以上几种方法出来的结果都是一样的,如下图所示

到此，关于“react要用专门的组件来渲染列表的原因是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！