Why does react use special components to render lists?-Front-end Q&A-php.cn

Why does react use special components to render lists?

WBOY

Release： 2022-05-05 10:47:01

Original

1950 people have browsed it

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.

Why does react use special components to render lists?

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

Copy after login

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

Copy after login

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

Copy after login

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 &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
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>
)
}
}

Copy after login

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

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

Copy after login

import React, { Component } from &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
booklist(){
// 把服务器端返回的字符串数组转换为JSX数组
return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
render() {
return (
<div>
<ul>
{this.booklist()}
</ul>
</div>
)
}
}

Copy after login

Method 3: Directly Bind the mapped JSX array

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

Copy after login

import React, { Component } from &#39;react&#39;
export default class App extends Component {
// 假设服务器端返回如下
state={books:[&#39;巴黎圣母院&#39;,&#39;悲惨世界&#39;,&#39;爱的教育&#39;,&#39;简·爱&#39;,&#39;钢铁是怎样炼成的&#39;,&#39;安徒生童话&#39;]}
render() {
return (
<div>
<ul>
{/*this.booklist()*/}
{
/*此处不能急 编写for循环——for不是表达式*/
this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
}
</ul>
</div>
)
}
}

Copy after login

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

Why does react use special components to render lists?

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!