Why does react use special components to render lists?

Because when react renders large data collections, the coordinator must evaluate the components generated by each changed collection, which is very inefficient; using specialized components to render lists can improve rendering of large data collections. performance, and no longer render other components.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

Why react uses a dedicated component to render the list

Rendering the list in a dedicated component

This is especially important when rendering large data collections. React performs very poorly when rendering large data collections because the coordinator must evaluate the resulting components for each changing collection. Therefore, it is recommended to use a special component to map the collection (array) and render this component, and never render other components:

Bad:

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>)
    }
}

In the above example, when user. When the name changes, React will unnecessarily coordinate all TodoView components. Although the TodoView component will not re-render, the coordination process itself is very expensive.

Okay:

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>)
    }
}

List rendering in React

Use v-for in Vue.js to implement loop rendering of list items in the template;

Use wx:for in the applet to implement the list in the template Item loop rendering;

There are no templates in React (that is, no need for v-for), and there is no instruction system (that is, no similar mechanism is provided).

Method 1: for loop traversal

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>
)
}
}

Method 2: Create a function to return the mapped JSX array

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>
)
}
}

Method 3: Directly Bind the mapped JSX array

{
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>
)
}
}

The results of the above methods are the same, as shown in the figure below

Recommended learning ：《react video tutorial》

The above is the detailed content of Why does react use special components to render lists?. For more information, please follow other related articles on the PHP Chinese website!