react新手练习生

一个简单的React小东西

一、技术栈

1. React框架
   用到的知识点也不多：生命周期，组件间通信（子传父，父传子），模块组件化
2. Ts编程语言
   Js 的一个超集，提供了静态类型检查、类、接口、泛型等特性，可以在大型项目中提供更好的代码可读性、可维护性和可靠性。（这个项目里，纯属用着玩，就当练练手）
3. react-dom
4. Antd Char组件库
   使用里面的条状图和饼状图，配一下api就行了，你们也可以用echarts

二、页面浏览

模仿的，数据是爬的，图片是复制的。哈哈哈哈哈哈哈哈哈哈，写的挺潦草，但功能挺齐全，刚学react的可以敲一下，中间文字很丑，可以自行更改一下(●’◡’●)

三、数据加载

因为数据比较多，我这里使用的是懒加载，可以有效的保持良好的性能，当然这只是其中一种面对数据量较大的处理方式，有兴趣可以了解下面这些其他方式：

• 分页加载： 将数据分成小块，只在需要时加载每一页的数据。这可以通过后端 API 的分页支持来实现，也可以在前端通过控制请求的参数来模拟。

• 虚拟滚动： 使用虚拟滚动技术，只渲染可见区域内的数据。这可以通过使用 React 虚拟化库（如 react-window 或 react-virtualized）来实现。

• 数据缓存： 缓存已加载的数据，以避免重复请求。你可以使用状态管理工具（如 Redux）或 React 的 useMemo 和 useCallback 来实现数据缓存。

• 分析和优化渲染性能： 使用 React 开发者工具分析组件的渲染性能，确保不必要的组件重新渲染被最小化。可以使用 React.memo、shouldComponentUpdate 或 React Hooks 的 useMemo 等技术来优化组件的渲染。

• 懒加载和延迟加载： 只在组件真正需要时加载数据。React 提供了 React.lazy 和 Suspense 来实现组件的懒加载。

• Web Workers： 使用 Web Workers 在后台进行数据处理，以避免阻塞主线程。这对于大规模数据的处理和计算特别有用。

四、总结

这是个简单的小项目，甚至不算项目吧，就当一个小玩意，有兴趣可以下载一下，我是菜鸡有很多不足，勿喷

百度网盘直接下载文件，然后打开，终端输入npm i 下载node包
链接：https://pan.baidu.com/s/1HTAQ-uHqZDih_t0LKWdpuw
提取码：0713