小陈工的博客

到此为止，我们的项目就已经全部开发完成了，由于篇幅有限，我们只展示了一部分的业务逻辑的编写，在真实的生产环境中，还要根据公司的需求去灵活运用这些知识。

1 、使用场景：表单处理，表单验证 2 、优势：轻松处理React中的复杂表单，包括：获取表单元素的值，表单验证和错误信息，处理表单提交，并且将这些内容放在一起统一处理，有利于代码阅读，重构，测试等 3 、使用方式： 1. 高阶组件（withFormik） 2. render - props（ < Formik render = {() => {} } / > ）

默认：List组件只让组件自身出现滚动条，无法让整个页面滚动，也就无法实现标题吸顶功能解决方式：使用WindowScroller高阶组件，让List组件跟随页面滚动（为List组件提供状态，同时还需要设置List组件的autoHeight属性）注意：WindowScroller高阶组件只能提供height，无法提供width解决方式：在WindowScroller组件中使用AutoSizer高阶组件来为List组件提供width使用场景：展示筛选对话框的时候，实现动画效果，增强用户体验。

1.1.2 实现步骤在Filter组件中需要完成的步骤：在FilterPicker组件中需要完成的步骤：1.1.3 代码示例在src/pages/HouseList/components/Filter/index.js中添加如下代码：首先，提供组件展示或隐藏的状态和筛选条件数据：然后，在render方法中判断openType的值为area/mode/price 时，就显示FilterPicker组件，以及遮罩层：然后，在标题点击事件中，修改状态openType为当前type，展示对话框：然后

当每一次请求接口的时候，都需要写相同的baseUrl。例如：http://localhost:8080这样太繁琐，而且当我们的项目部署上线时，很难替换由于篇幅有限，条件筛选其他组件将留到下一篇笔记介绍。

实现步骤：代码示例：在src/components/NavHeader/index.js中添加如下代码：1.2 样式调整在src/components下的NavHeader文件夹中创建 index.scss 文件把之前城市列表写过的样式，复制到这个文件下注意：默认情况下，只有路由 Route 直接渲染的组件才能够获取到路由信息，如果需要在其他组件中获取到路由信息，可以通过 withRouter 高阶组件来获取实现步骤：代码示例：在src/components/NavHeader/index.j

在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题这样就会导致移动设备耗电加快，影响移动设备的电池寿命产生性能问题的原因：大量DOM节点的重绘和重排懒渲染可视区域渲染react-virtualized是React组件，用来高效渲染大型列表和表格数据我们使用它来渲染城市列表数据到目前为止，我们完成了项目的4个部分的代码编写，分别是1、项目准备：部署本地接口，脚手架初始化项目，antd-mobile，路由等。

在src/pages/index/index.js中添加如下代码：相关样式（index.scss）：1.3 百度地图API1.3.1 申请百度账号和秘钥1、注册百度账号，登录百度地图开放平台。2、点击创建应用。3、获取到密钥（ak）1、在项目入口文件index.js中引入百度地图 API 的JS文件，替换自己申请好的密钥2、在index.css 中设置全局样式：3、在src/pages目录下创建Map组件，配置路由，在Map组件中添加如下代码：1.4 获取顶部导航城市信息1、通过 IP

修改首页路由的配置：这里需要添加 exact属性如果是默认路由需要跳转到 /home在src/App.js中添加如下代码：在src/pages/home/index.js中添加如下代码：二、轮播图2.1 轮播图效果图1、打开antd-mobile组件库的Carousel组件文档2、选择基本，点击 () 显示源码3、拷贝核心代码到Index的组件中4、分析并且调整代码，让其能够在项目中运行导入组件：状态：声明周期钩子函数，修改状态，设置数据：结构：2.4 轮播图代码重构先优化