您好,登录后才能下订单哦!
这篇文章主要介绍“react要用专门的组件来渲染列表的原因是什么”,在日常操作中,相信很多人在react要用专门的组件来渲染列表的原因是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react要用专门的组件来渲染列表的原因是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
因为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要用专门的组件来渲染列表的原因是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。