地图找房模块目标
完成根据定位展示当前城市
能够完成在地图上渲染出文本覆盖物
能够对文本覆盖物进行内容和样式修改
能够说出地图找房功能的业务逻辑
理解地图找房的封装流程，知道每一个方法的作用是什么？
能够参照老师代码敲出地图找房的封装代码
能够使用 Toast 的 loading 效果来对页面进行优化
根据定位展示当前城市（★★★）
获取当前定位城市
使用 地址解析器 解析当前城市坐标
调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为 11
在地图中添加比例尺和平移缩放控件
实现房源信息子地图中展示（★★★）
这些房源信息其实就是用文本覆盖物来实现的，所以我们先查看百度开发文档，先创建文本覆盖物
创建文本覆盖物
创建 Label 示例对象
掉用 setStyle() 方法设置样式
在 map 对象上调用 addOverlay() 方法，讲文本覆盖物添加到地图中
绘制房源覆盖物
由于默认提供的本文覆盖物与我们效果不符合，所以我们需要进行重新的绘制
调用 Label 的 setContent 方法，传入 html 结构，修改 HTML 的内容样式; ...
渲染城市列表目标
完成城市索引高亮效果
完成点击索引跳转到对应位置
能够实现切换城市功能（除了北京，上海，广州，深圳，其他成均无房源信息，需要提示用户）
城市索引列表高亮
给 list 组件添加 onRowsRendered 配置项，用于获取当前列表渲染的行信息，在里面就会有相应信息
通过参数 startIndex 获取到 起始行对应的索引号
判断 startIndex 和 activeIndex 不同时候，更新状态 activeIndex 为 startIndex
12345678910111213141516<List ... onRowsRendered={this.rowRendered}/>/** * 获取滚动时候,相应的数据 * @param {*} param0 */rowRendered = ({ startIndex }) => { if (this.state.activeIndex !== startIndex) { this.se ...
城市选择模块目标
能够实现顶部导航栏
能够获取城市列表数据，热门城市数据，当前定位城市数据，并且对数据进行重新封装
知道什么是长列表，以及带来的缺陷
说出长列表性能优化的两种方式
能够使用 react-virtualized 进行城市列表的渲染
能够渲染右侧索引列表
功能分析
切换城市，查看该城市下的房源信息
功能
顶部导航栏
城市列表展示
使用索引快速切换城市
点击城市名称切换城市
顶部导航栏（★★★）
打开 antd-mobile 组件库的 NavBar 导航栏组件 文档
从文档中拷贝组件示例代码到项目中，让其正确运行
修改导航栏样式和结构
示例
引入 组件库
1import {NavBar, Icon} from 'antd-mobile'
拷贝代码结构
123456789101112131415<div> <NavBar // 模式 默认值是 dark mode="light" // 左侧小图片 icon={& ...
首页模块目标
能够使用 Carousel 组件完成轮播图功能
能够安装 axios，并且使用 axios 进行网络请求
能够使用 Flex 组件完成 TabBar 功能
能够知道轮播图与 TabBar 出现的 bug，并且解决
能够安装 Sass，编写 Sass 代码
能够使用 Grid 组件完成租房小组功能
能够利用 H5 API 获取当前的定位信息
能够使用百度地图 API 展示地图页面，获取对应城市信息
轮播图（★★★）组件使用的基本步骤
打开 antd-mobile 组件库的 Carousel 组件文档
选择基本，点击 (</>) 显示源码
拷贝核心代码到 Index 的组件中
分析并且调整代码，让其能够在项目中运行
轮播图的移植
拷贝示例代码中的内容
导入组件
1import { Carousel, WingBlank } from 'antd-mobile';
状态
123456state = { // 图片的名称 data: ['1', '2', ...
好客租房移动 Web - 上目标
能够初始化项目
能够使用 antd-mobile 组件库
能够完成项目整体布局
能够理解嵌套路由
能够使用 antd-mobile 提供的 TabBar 组件
能够对 TabBar 进行定制
能够实现首页路由的处理
项目介绍
好客租房 - 移动 Web 端
项目介绍：本项目是一个在线租房项目，实现了类似链家等项目的功能，解决了用户租房的需求
核心业务：在线找房（地图、条件搜索）、用户登录、房源发布等
技术栈
React 核心库：react、react-dom、react-router-dom
脚手架：create-react-app
数据请求：axios
UI 组件库：antd-mobile
其他组件库：react-virtualized、formik+yup、react-spring 等
百度地图 API
项目准备项目搭建（★★★）
本地接口部署
创建并导入数据：数据库名称 hkzf(固定名称)
使用脚手架初始化项目
使用 npx create-react-app hkzf-mobile
进入到项目根目录 使用 npm start
...
React 原理揭秘目标
能够说出 React 组件的更新机制
能够对组件进行性能优化
能够说出虚拟 DOM 和 DIff 算法
组件更新机制
setState() 的两个作用
修改 state
更新组件
过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）
组件性能优化减轻 state
减轻 state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading 等）
注意：不用做渲染的数据不要放在 state 中
对于这种需要在多个方法中用到的数据，应该放到 this 中
避免不必要的重新渲染
组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
问题：子组件没有任何变化时也会重新渲染
如果避免不必要的重新渲染？
解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
在这个函数中，nextProps 和 nextState 是最新的状态以及属性
作用：这个函数有返回值，如果返回 true，代表需要重新渲染，如果返回 fa ...
组件生命周期（★★★）目标
说出组件生命周期对应的钩子函数
钩子函数调用的时机
概述意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等
组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
构造函数的作用：为开发人员在不同阶段操作组件提供了实际
生命周期阶段
创建时（挂载阶段）
执行时机：组件创建时（页面加载时）
执行顺序
更新时执行时机：setState()、 forceUpdate()、 组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
执行顺序：
卸载时执行时机：组件从页面中消失
作用：用来做清理操作
不常用的钩子函数旧版的生命周期钩子函数
新版完整生命会走棋钩子函数
getDerivedStateFromProps()
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内 ...
uni-app 的基本使用课程介绍：
基础部分：
环境搭建
页面外观配置
数据绑定
uni-app 的生命周期
组件的使用
uni-app 中样式学习
在 uni-app 中使用字体图标和开启 scss
条件注释跨端兼容
uni 中的事件
导航跳转
组件创建和通讯，及组件的生命周期
uni-app 中使用 uni-ui 库
项目：黑马商城项目
uni-app 介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。
具有 vue 和微信小程序的开发经验，可快速上手 uni-app
为什么要去学习 uni-app？
相对开发者来说，减少了学习成本，因为只学会 uni-app 之后，即可开发出 iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。
环境搭建安装编辑 ...
