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那么由于下标的改动，可能会造成对后面所有数组的重新渲染。

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