React好房租客项目：项目搭建与整体布局

目录：

• 项目准备
• 项目整体布局
• 首页模块
• 城市选择模块

一、项目准备

1.1 项目介绍

• 好客租房 - 移动 Web 端
• 项目介绍：本项目是一个在线租房项目，实现了类似链家等项目的功能，解决了用户租房的需求
• 核心业务：在线找房（地图、条件搜索）、用户登录、房源发布等

技术栈

• React 核心库：react、react-dom、react-router-dom
• 脚手架：create-react-app
• 数据请求：axios
• UI组件库： antd-mobile
• 其他组件库： react-virtualized、formik+yup、react-spring 等
• 百度地图API

1.2 项目搭建

步骤

1. 本地接口部署（数据库、接口）

2. 使用脚手架初始化项目

本地接口部署

• 1. 创建并导入数据：数据库名称 hkzf（固定名称）
• 2. 启动接口：在 API 目录中执行 npm start
• 3. 测试接口：接口地址 http://localhost:8080

初始化项目

• 1. 初始化项目：npx create-react-app hkzf-mobile
• 2. 启动项目，在项目根目录执行命令：yarn start

3. 调整项目中 src 目录结构如下：

1.3 组件库 antd-mobile

介绍和使用

• 1. 打开 antd-mobile 的文档
• 2. 安装：yarn add antd-mobile
• 3. 在 App.js 根组件中导入要使用的组件
• 4. 渲染组件
• 5. 在 index.js 中导入组件库样式

1.4 配置基础路由

步骤

• 1. 安装：yarn add react-router-dom
• 2. 导入路由组件：Router / Route / Link
• 3. 在 pages 文件夹中创建 Home/index.js 和 CityList/index.js 两个组件
• 4. 使用 Route 组件配置首页和城市选择页面

1.5 外观和样式调整

步骤

1. 修改页面标题：在 index.html 中修改

2. 基础样式调整：在 index.css 中修改

二、项目整体布局

2.1 项目整体布局

分析

1. 有 TabBar 的页面：首页、找房、资讯、我的

2. 无 TabBar 的页面：城市选择等（简单，不需要额外处理）

3. TabBar 的菜单也可以实现路由切换，也就是在路由内部切换路由（嵌套路由）

2.2 嵌套路由

说明

• 嵌套路由：路由内部包含路由
• 用 Home 组件表示父路由的内容
• 用 News 组件表示子路由的内容

使用步骤

• 1. 在 pages 文件夹中创建 News/index.js 组件
• 2. 在 Home 组件中，添加一个 Route 作为子路由（嵌套的路由）的出口
• 3. 设置嵌套路由的 path，格式以父路由 path 开头（父组件展示，子组件才会展示）
• 4. 修改 pathname 为 /home/news，News 组件的内容就会展示在 Home 组件中了

2.3 实现 TabBar

1. 基本使用

• ① 打开 antd-mobile 组件库中 TabBar 组件的 文档。
• ② 选择 APP 型选项卡菜单，点击（</>）显示源码。
• ③ 拷贝核心代码到 Home 组件中。
• ④ 分析并调整代码，让其能够在项目中正常运行。

2. 修改 TabBar 外观样式

• ① 删除前面路由的演示代码。
• ② 修改 TabBar 菜单项文字标题。
• ③ 修改 TabBar 菜单文字标题颜色（选中和未选中）。
• ④ 使用字体图标，修改 TabBar 菜单的图标。
• ⑤ 修改 TabBar 菜单项的图标大小。
• ⑥ 调整 TabBar 菜单的位置，让其固定在最底部

3. TabBar 配合路由使用

① 根据 TabBar 组件 文档 设置不渲染内容部分（只保留菜单项，不显示内容）

② 给 TabBar.Item 绑定点击事件。

③ 在点击事件中调用 history.push() 实现路由切换。

④ 创建 TabBar 组件菜单项对应的其他 3 个组件，并在 Home 组件中配置路由信息。

⑤ 给菜单项添加 selected 属性，设置当前匹配的菜单项高亮。

4. TabBar.Item 代码重构

① 提供菜单数据（包含菜单项的特有信息）。

② 使用 map 方法，遍历数据，渲染 TabBar.Item。

三、首页模块

3.1 首页路由处理

说明

• 修改首页路由规则为： /home（去掉 /index）
• 配合默认路由，实现默认跳转到 /home（路由文档）
• render 属性：是一个函数prop，用于指定要渲染的内容
• Redirect 组件用于实现路由重定向，to 属性指定要跳转到的路由地址

3.2 轮播图

1. 基本使用

• ① 打开 antd-mobile 组件库的 Carousel 组件文档。
• ② 选择基本，点击（</>）显示源码。
• ③ 拷贝核心代码到 Index 组件中。
• ④ 分析并调整代码，让其能够在项目中正常运行。

2. 获取轮播图数据

• ① 安装 axios：yarn add axios 。
• ② 在 Index 组件中导入 axios 。
• ③ 在 state 中添加轮播图数据：swipers 。
• ④ 新建一个方法 getSwipers 用来获取轮播图数据，并更新 swipers 状态。
• ⑤ 在 componentDidMount 钩子函数中调用该方法。
• ⑥ 使用获取到的数据渲染轮播图。

3.3 导航菜单

步骤

1. 打开 Flex 布局组件文档

2. 使用 Flex 布局，创建导航菜单结构

3.4 在脚手架中使用Sass

步骤

• ① 打开脚手架的文档，找到添加Sass样式
• ② 安装Sass： yarn add node-sass
• ③ 创建后缀名称为 .scss 或 .sass 的样式文件
• ④ 在组件中导入Sass样式文件

3.5 租房小组

1. 业务介绍

• 需求：根据当前地理位置展示不同小组信息
• 需要后台接口根据用户找房数据，推荐用户最感兴趣的内容，核心业务在后端
• 前端只负责展示数据

2. 数据获取

• ① 在 state 中添加租房小组数据：groups 。
• ② 新建一个方法 getGroups 用来获取数据，并更新 groups 状态。
• ③ 在 componentDidMount 钩子函数中调用该方法。
• ④ 使用获取到的数据渲染租房小组数据。

3. 结构和样式

• ① 实现标题的结构和样式。
• ② 打开 Grid 宫格组件文档。
• ③ 选择 基本 菜单，点击（</>）显示源码。
• ④ 拷贝核心代码到 Index 组件中。
• ⑤ 分析并调整代码，让其能够在项目中正常运行。

3.6 顶部导航

步骤

1. 实现结构和样式。

2. 添加城市选择、搜索、地图找房页面的路由跳转。

3.7 H5 中的地理位置 API

• 场景：根据当前地理位置，获取当前所在城市的房源信息
• 作用：在 Web 应用程序中获取地理位置（文档）
• 说明：地理位置 API 通过 navigator.geolocation 对象提供，通过 getCurrentPosition 方法获取
• 注意：获取到的地理位置跟 GPS、IP地址、WIFI和蓝牙的MAC地址、GSM/CDMS的ID 有关
• 比如：手机优先使用GPS定位，笔记本等最准确的定位是WIFI

3.8 百度地图 API

1. 介绍

• H5 的地理位置 API 只能获取到经纬度信息
• 实际开发中，会使用百度地图/高德地图来完成地理位置的相关功能
• 租房项目中，通过百度地图 API 实现地理定位和地图找房功能
• 百度地图文档 （首页  开发者文档  JavaScript API）
• 注意：使用前，需要先申请 百度账号和 ak ，获取到的 ak

2. 申请百度账号和密钥

• ① 注册百度账号，登录百度地图开放平台。
• ② 点击创建应用。
• ③ 获取到密钥（ak）。

3. 使用步骤

① 引入百度地图 API 的JS文件，替换自己申请好的密钥

② 在 index.css 中设置全局样式

③ 创建 Map 组件，配置路由。并在 Map 组件中，创建地图容器元素，并设置样式

④ 创建地图实例

⑤ 设置中心点坐标。

⑥ 初始化地图，同时设置展示级别。

4. 获取顶部导航城市信息

• ① 打开百度地图JS API 定位文档 。
• ② 通过 IP 定位获取到当前城市名称。
• ③ 调用我们服务器的接口，换取项目中的城市信息（有房源的城市的名称和id）。
• ④ 将接口返回的城市信息展示在顶部导航栏中。

四、城市选择模块

4.1 功能分析

• 业务：切换城市，查看该城市下的房源信息
• 功能：1. 顶部导航栏 2. 城市列表展示 3. 使用索引快速切换城市 4. 点击城市名称切换城市
• 第三方组件： react-virtualized 长列表
• 难点：数据格式处理、react-virtualized组件在项目中的使用

4.2 顶部导航栏

步骤

• 1. 打开 antd-mobile 组件库的 NavBar 导航栏组件 文档。
• 2. 从文档中拷贝组件示例代码到项目中，让其正确运行。
• 3. 修改导航栏样式和结构。

4.3 获取并处理城市列表数据

步骤

• 1. 页面加载时，根据接口获取城市列表数据。
• 2. 分析当前数据格式以及该功能需要的数据格式。
• 3. 转化当前数据格式为所需数据格式。
• 4. 获取热门城市数据，并添加到现有数据列表中（顺序）。
• 5. 获取当前定位城市数据，并添加到现有数据列表中。

当前定位城市数据

• 问题：首页模块中，需要获取定位城市，城市列表模块中也需要获取定位城市，该如何处理？
• 答案：封装成函数，哪个页面要获取定位城市，直接调用该方法即可。

当前定位城市数据

1. 在 utils 目录中，新建 index.js，在该文件中封装

2. 创建并导出获取定位城市的函数 getCurrentCity

3. 判断 localStorage 中是否有定位城市

4. 如果没有，就使用首页中获取定位城市的代码来获取，并且存储到本地存储中，然后返回该城市数据

5. 如果有，直接返回本地存储中的城市数据

4.4 长列表性能优化

1. 概述

• 场景：展示大型列表和表格数据（比如：城市列表、通讯录、微博等） ，会导致页面卡顿、滚动不流畅
• 等性能问题
• 产生性能问题的原因：大量 DOM 节点的重绘和重排
• 其他原因：老旧设备
• 其他问题：移动设备耗电加快、影响移动设备电池寿命
• 优化方案：1. 懒渲染 2. 可视区域渲染

2. 懒渲染说明

• 常见的长列表优化方案，常见于移动端
• 原理：每次只渲染一部分（比如10条数据），等渲染的数据即将滚动完时，再渲染下面部分
• 优点：每次渲染一部分数据，速度快
• 缺点：数据量大时，页面中依然存在大量 DOM 节点，占用内存过多、降低浏览器渲染性能，导致页面卡顿
• 使用场景：数据量不大的情况（比如 1000 条，具体还要看每条数据的复杂程度）

3. 可视区域渲染（react-virtualized）

• 原理：只渲染页面可视区域的列表项，非可视区域的数据“完全不渲染”，在滚动列表时动态更新列表项
• 使用场景：一次性展示大量数据的情况（比如：大表格、微博、聊天应用等）

4.5 react-virtualized

1. 概述

• ① 在项目中的应用：实现 城市选择 列表页面的渲染。
• ② react-virtualized 是 React 组件，用来高效渲染大型列表和表格数据。
• ③ GitHub地址：react-virtualized 。
• ④ 功能类似的轻量级组件：react-window 。

2. 基本使用

• ① 安装：yarn add react-virtualized 。
• ② 在项目入口文件 index.js 中导入样式文件（只导入一次即可）。
• ③ 打开文档，点击 List 组件，进入 List 的文档中。
• ④ 翻到文档最底部，将示例代码拷贝到项目中。
• ⑤ 分析示例代码。

4.6 渲染城市列表

1. 让List组件占满屏幕

• ① 打开 AutoSizer 高阶组件的文档。
• ② 导入 AutoSizer 组件。
• ③ 通过 render-props 模式，获取到 AutoSizer 组件暴露的 width 和 height 属性。
• ④ 设置 List 组件的 width 和 height 属性。
• ⑤ 设置城市选择页面根元素高度 100% ，让 List 组件占满整个页面。
• ⑥ 调整样式，让页面不要出现全局滚动条，避免顶部导航栏滚动。

2. 使用List组件渲染列表

• ① 将获取到的 cityList 和 cityIndex 添加为组件的状态数据。
• ② 修改 List 组件的 rowCount 为 cityIndex 数组的长度。
• ③ 将 rowRenderer 函数，添加到组件中，以便在函数中获取到状态数据 cityList 和 cityIndex。
• ④ 修改 List 组件的 rowRenderer 为组件中的 rowRenderer 方法。
• ⑤ 修改 rowRenderer 方法中渲染的每行结构和样式。
• ⑥ 修改 List 组件的 rowHeight 为函数，动态计算每一行的高度（因为每一行高度都不相同）。

4.7 城市索引列表

1. 渲染城市索引列表

• ① 封装 renderCityIndex 方法，用来渲染城市索引列表。
• ② 在方法中，获取到索引数组 cityIndex ，遍历 cityIndex ，渲染索引列表。
• ③ 将索引 hot 替换为 热。
• ④ 在 state 中添加状态 activeIndex，来指定当前高亮的索引。
• ⑤ 在遍历 cityIndex 时，添加当前字母索引是否高亮的判断条件。

2. 滚动城市列表让对应索引高亮

• ① 给 List 组件添加 onRowsRendered 配置项，用于获取当前列表渲染的行信息。
• ② 通过参数 startIndex 获取到，起始行索引（也就是城市列表可视区最顶部一行的索引号）。
• ③ 判断 startIndex 和 activeIndex 是否相同（判断的目的是为了提升性能，避免不必要的 state 更新）。
• ④ 当 startIndex 和 activeIndex 不同时，更新状态 activeIndex 为 startIndex 的值。

3. 点击索引置顶该索引城市

• ① 给索引列表项绑定点击事件。
• ② 在点击事件中， 通过 index 获取到当前项索引号。
• ③ 调用 List 组件的 scrollToRow 方法，让 List 组件滚动到指定行。
• ④ 设置 List 组件的 scrollToAlignment 配置项值为 start，保证被点击行出现在页面顶部。

4.8 切换城市

• ① 给城市列表项绑定点击事件。
• ② 判断当前城市是否有房源数据（只有北/上/广/深四个城市有数据）。
• ③ 如果有房源数据，则保存当前城市数据到本地缓存中，并返回上一页。
• ④ 如果没有房源数据，则提示用户：该城市暂无房源数据，不执行任何操作。