1. 前言
1.1 列表类的界面是我们经常用到的
1.2 这个写下图文混排,也就是商城类的列表界面
1.3 这篇文章都是通过函数式组件实现的
1.4 这篇文章先通过函数式组件实现下效果 ,作为一个复习总结吧
1.5 下篇文章是通过类组件 实现懒加载思路
2. 效果预览
因为图片比较多,导致视频比较大,视频转为
gif图片也比较慢,也从另外一个侧面说明了懒加载的重要性
![{WF{]90CJH6`DT1W1$8S5JO.png](https://ucc.alicdn.com/pic/developer-ecology/9b5c7c10fea84f44a4ed20009739efae.png "{WF{]90CJH6`DT1W1$8S5JO.png")
3. 分析
常见的效果 ,分析起来也省事
- 数据来源,是之前
node做爬虫爬取的数据,至于为什么是华为,因为我愿意,我高兴,选什么都是自己的决定- 这么一个简单的效果我拆分了 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. 后记?
打完收工,下篇文章见
