1. 前言

1.1 列表类的界面是我们经常用到的

1.2 这个写下图文混排,也就是商城类的列表界面

1.3 这篇文章都是通过函数式组件实现的

1.4 这篇文章先通过函数式组件实现下效果 ,作为一个复习总结吧

1.5 下篇文章是通过类组件 实现懒加载思路

2. 效果预览

因为图片比较多,导致视频比较大,视频转为gif图片也比较慢,

也从另外一个侧面说明了懒加载的重要性

3. 分析

常见的效果 ,分析起来也省事

1. 数据来源,是之前node做爬虫爬取的数据,至于为什么是华为,因为我愿意,我高兴,选什么都是自己的决定
2. 这么一个简单的效果我拆分了 3个组件是不是有点,高射炮打蚊子,没办法,理解比较慢,只能量变引起质变,多练习
3. 其实也简单 就是 App 一个整合组件,
   包着一个ul的list组件
   list组件里面就是 具体的Item组件也就是 li

4.首先 Item组件

图片 路径 名字 都是通过属性传进来的

函数式组件嘛  属性传值

注意

img标签 单标签 在这个JSX里面一定要加 **/** 表示结束

var Item = (props) => {
            return (
                <li>
                    <img src={props.item.image} alt="" />
                    <h6>{props.item.name}</h6>
                </li>
            )
        }

5. List组件

图片数组传进来

这里 list加了个类名 便于后面写样式

let List = (props => {
            return (
                <ul className="list">
                    {props.children}
                </ul>
            )
        })

6. App整合组件

let App = () => {
            return (
                <List>{
                    dataList.map(item => {
                            return (
                                <Item item={item}   key={item.skuId}/>
                            )
                        })
                    }
                </List>
            );
        }

7. 数据的引入

App组件的 dataList哪来的 ?

<script src="../js/data.js"></script>

这个文件里面是我的数据

var dataList = [{},{}]

8. 后记?

打完收工,下篇文章见