# react_hkzf

**Repository Path**: abcdfdewrw/react_hkzf

## Basic Information

- **Project Name**: react_hkzf
- **Description**: React实现 在线租房项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-18
- **Last Updated**: 2025-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, MySQL

## README

# 好客租房 - 移动 Web 端
## 项目介绍：<br/>
本项目是一个在线租房项目，实现了类似链家等项目的功能，解决了用户租房的需求

## 核心业务：<br/>
在线找房（地图、条件搜索）、用户登录、房源发布等

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

## 安装：<br/>
- npm install
- npm start


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

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

## 3.可视区域渲決(react-virtualized )
- 原理:只渲染页面可视区域的列表项，非可视区域的数据“完全不渲染”，在滚动列表时动态更新列表项
- 使用场景:一次性展示大量数据的情况(比如:大表格、微博、聊天应用等)