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那麼因爲下標的改動，可能會形成對後面全部數組的從新渲染。

列表渲染就講到這兒，你們若是有啥疑問，歡迎留言給我！