1. 前言

1.1 列表类的界面是我们经常用到的
1.2 这个写下图文混排,也就是商城类的列表界面
1.3 这篇文章都是通过函数式组件实现的
1.4 这篇文章先通过函数式组件实现下效果 ,作为一个复习总结吧
1.5 下篇文章是通过类组件 实现懒加载思路

---

2. 效果预览

因为图片比较多,导致视频比较大,视频转为gif图片也比较慢,
也从另外一个侧面说明了懒加载的重要性

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. 后记?

打完收工,下篇文章见

---

参考资料

类组件 实现懒加载思路

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉