阅读 239

React入门系列 - 6. 渲染一个列表页

6. 渲染一个列表页

我们先做一个用于渲染的mock数据。

const data = [
    {
        title:'T恤',
        price: '25.5'
    },
    {
        title:'卫衣',
        price: '125.5'
    },
    {
        title:'长款毛衣',
        price: '312.00'
    },
    {
        title:'牛仔裤',
        price: '58.0'
    },
]
复制代码

列表渲染有多种方式来进行,一般我们采用ES6新的数组方法map来进行,当然我也会写一个普通版本给你们看哟。

6.1 基础版的列表渲染

import React,{Component} from 'react'
export default class index extends Component {
    render () {
        const data = [
            {
                title:'T恤',
                price: '25.5'
            },
            {
                title:'卫衣',
                price: '125.5'
            },
            {
                title:'长款毛衣',
                price: '312.00'
            },
            {
                title:'牛仔裤',
                price: '58.0'
            },
        ]
        renter <div>
            {
                let dom = []
                for(var i=0;i<data.length;i++) {
                    dom.push(<div key={i}>{data[i].title}</div>)
                }
                return dom
            }
        </div>
    }
}

复制代码

我们这儿渲染的这个列表,主要用的是普通循环遍历,将所有需要渲染的控件压入数组dom

然后,返回这个dom,react会通过他的vdom系统进行渲染数据并且显示出来。

注意了,react中渲染数组一定要设置一个key,因为有了key之后,vdom的计算效率更高。具体大家可以找一些分析vdom的文章看一看。

6.2 ES6语法

好了,我们来看看使用ES6的语法,如何渲染这个结构。

import React,{Component} from 'react'
export default class index extends Component {
    render () {
        const data = [
            {
                title:'T恤',
                price: '25.5'
            },
            {
                title:'卫衣',
                price: '125.5'
            },
            {
                title:'长款毛衣',
                price: '312.00'
            },
            {
                title:'牛仔裤',
                price: '58.0'
            },
        ]
        renter <div>
            {
            data.map((item,i)=>(<div key={i}>{item.title}</div>))
            }
        </div>
    }
}
复制代码

是不是感觉这样非常的简洁。

对了,大家要注意,不要使用数组下标设置组件的key。大家想想这个场景,如果这个数组出现了变动比如缩减了中间一个item那么由于下标的改动,可能会造成对后面所有数组的重新渲染。

列表渲染就讲到这儿,大家如果有啥疑问,欢迎留言给我!

关注下面的标签,发现更多相似文章
评论