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

143 阅读 0 评论 95 点赞

我是靠谱客的博主爱笑芹菜，这篇文章主要介绍为什么react要用专门的组件来渲染列表，现在分享给大家，希望可以做个参考。

本教程操作环境：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} ></TodoView>)}
            </ul>
        </div>)
    }
}1
2
3
4
5
6
7
8
9
10
11
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} ></TodosView>
        </div>)
    }
}1
2
3
4
5
6
7
8
9
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} ></TodoView>)}
        </ul>)
    }
}1
2
3
4
5
6
7
8
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>
)
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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() }1
2
3
4
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>
)
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 )
}1
2
3
{
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>
)
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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>
)
}
}
登录后复制