好客租房项目day03react.pptx

React好客租房项目Day03;Contents;Contents;;顶部导航栏

城市列表展示

使用索引快速切换城市

点击城市名称切换城市;;如何去使用一个antd-mobile所提供的组件?;打开antd-mobile组件库官方文档

找到我们想要的组件，例如：NavBar导航栏组件

从文档中拷贝组件示例代码到项目中，让其正确运行

修改导航栏样式和结构;;Contents;;根据接口文档，找到对应的url

利用axios进行网络请求;;我们需要把服务器返回的数据进行格式化处理，功能上，我们可以通过首字母来进行城市的定位，所以我们需要把服务器返回的数据进行分类，相同首字母的在一类中

我们需要遍历list数组

获取到每一个城市的首字母

判断我们定义的数组中是否有这个分类，如果有，那么直接push数据进来，如果没有，添加这个分类;;;;;;;Contents;;在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题，这样就会导致移动设备耗电加快，影响移动设备的电池寿命

产生性能问题的元素：大量DOM节点的重绘和重排

优化方案：

-懒渲染

-可视区域渲染

;;懒加载，常见的长列表优化方案，常见于移动端

原理：每次只渲染一部分，等渲染的数据即将滚动完时，再渲染下面部分

优点：每次渲染一部分数据，速度快

缺点：数据量大时，页面中依然存在大量DOM节点，占用内存过多，降低浏览器渲染性能，导致页面卡顿

使用场景：数据量不大的情况下

;;;;原理：只渲染页面可视区域的列表项，非可视区域的数据完全不渲染(预加载前面几项和后面几项)，在滚动列表时动态更新列表项

;Contents;;;安装：yarnaddreact-virtualized

在项目入口文件index.js中导入样式文件

打开文档，点击List组件，进入List的文档中

拷贝示例代码到我们项目中，分析示例代码;;Contents;;利用AutoSizer组件来调整子元素的宽高

导入AutoSizer组件

通过render-props模式，获取到AutoSizer组件暴露的width和height属性

设置List组件的width和height属性

设置城市选择页面根元素高度100%，让List组件占满整个页面;;将获取到的cityList和cityIndex添加为组建的状态数据

修改List组件的rowCount为cityIndex数组的长度

修改List组件的rowRender方法中渲染的结构和样式;;;;;封装renderCityIndex方法，用来渲染城市索引列表

在方法中，获取到索引数组cityIndex，遍历cityIndex，渲染索引列表

将索引hot替换成热

在state中添加状态activeIndex，用来指定当前高亮的索引

在遍历cityIndex时，添加当前字母索引是否是高亮;;目标