Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the reason why react uses special components to render the list". In daily operation, I believe many people have doubts about the reason why react wants to use special components to render the list. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt that "react should use special components to render the list." Next, please follow the editor to study!

Because when react renders a large data set, the coordinator must evaluate the components produced by each changing set, which is very inefficient, while using special components to render the list can improve the performance of rendering large data sets and no longer render other components.

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

Why does react use special components to render the list

Render 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 components produced by each changed collection. Therefore, it is recommended that you use a special component to map the collection (array) and render this component, not the other components:

Bad:

Class MyComponent extends Component {render () {const {todos, user} = this.props; return ({user.name} {todos.map (todo = >)})}}

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

All right:

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

List rendering in React

Using v-for to realize circular rendering of list items in template in Vue.js

Using wx:for in Mini Program to realize circular rendering of list items in templates.

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

Method 1:for loop traversal

Import React, {Component} from 'react'export default class App extends Component {/ / suppose the server returns the following state= {books: [Notre Dame de Paris, Les Miserables, Education of Love, Jane Eyre, how Steel is made, Hans Christian Andersen's Fairy Tales]} booklist () {/ / convert the string array returned from the server to the JSX array let arr= [] for (let item0) IJSX)} {this.showList ()} import React, {Component} from 'react'export default class App extends Component {/ / suppose the server returns the following state= {books: [Notre Dame de Paris, Les Miserables, Education of Love, Jane Eyre, how Steel is made " 'Hans Christian Andersen's Fairy Tales']} booklist () {/ / convert the string array returned from the server to the JSX array return this.state.books.map ((bmemi) = > "{b}")} render () {return ({this.booklist ()})}}

Method 3: directly bind the mapped JSX array

{this.state.list.map ((e-from I) = > JSX)} import React, {Component} from 'react'export default class App extends Component {/ / suppose the server returns the following state= {books: [Notre Dame de Paris, Les Miserables, Education of Love, Jane Eyre, how Steel is made " 'Hans Christian Andersen's Fairy Tales']} render () {return ({/ * this.booklist () * /} {/ * there is no rush to write a for loop here-- for is not an expression * / this.state.books.map ((bmeme I) = > "{b}")})}}

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

At this point, the study on "what is the reason why react uses special components to render the list" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.