Amore0525-CSDN博客

原创 React+TS前台项目实战（二十六）-- 高性能可配置Echarts图表组件封装

Echarts图表在项目中经常用到，然而，重复编写初始化，更新，以及清除实例等动作对于开发人员来说是一种浪费时间和精力。因此，在这篇文章中，将封装一个 “高性能可配置Echarts组件” ，简化开发的工作流程，提高数据可视化的效率和质量。下一篇讲【首页响应式搭建以及真实数据渲染】。关注本栏目，将实时更新。

2024-07-08 09:58:26 1136

原创谈谈在专栏【React+TS前台项目实战】项目中用到的Typescript定义方式

今天不讲实战，来讲一下我们专栏【React+TS前台项目实战】中用到的Typescript用法，比起网上那些直接概念式地讲，通过实战我们更能加深对Typescript方面相关知识的理解。函数返回类型为promise，这个在Button组件的封装中使用了。上面就是专栏【React+TS前台项目实战】目前为止主要用到的类型声明定义的方式，接下来会继续这个专栏文章的发布，还会继续用到其他方式进行类型声明定义，请持续关注。

2024-06-30 12:16:05 996

原创 React+TS前台项目实战（二十一）-- Search业务组件封装实现全局搜索

今天，我们来封装一个业务灵巧的组件，它集成了搜索和展示功能。通过配置文件，我们可以为不同的模块定制展示和跳转逻辑，从而减少重复的代码。同时，我们将使用React Query来实现搜索功能，并模拟请求成功、请求失败和中断请求的处理方式。这样，我们可以集中管理搜索结果展示和跳转逻辑，并方便地进行维护和扩展。

2024-06-28 09:25:05 1678

原创 React+TS前台项目实战（九）-- 全局常用组件弹窗Dialog封装

今天这篇主要讲全局公共弹窗Dialog组件封装，将用到上篇封装的模态框Modal组件。有时在前台项目中，偶尔要用到一两个常用的组件，如弹窗，其实不必非安装ant-design这些主流框架，大可自定义封装一个，而无需引入额外依赖，提高自己的封装能力。下一篇讲【全局常用组件Text封装】。关注本栏目，将实时更新。

2024-06-14 09:33:25 1383

原创 React后台管理（十四）-- 完整示例页面构建教学

经过了前面文章的学习，终于到最后一步了，那就是一个管理页面的构建，包括处理列表请求，搜索、重置和展开/收起等功能。结合之前封装的布局、功能相关组件，在本文只需要按需引入，统一了代码标准，减少重复代码，提高代码的可维护性和可复用性。关注本栏目，会实时更新。

2024-05-30 09:00:37 1557

原创 React后台管理（十二）-- 页面常用hook封装 --- useSearch搜索封装

在今天的 React 生态系统中，有许多优秀的 React Hooks 库，如 ahooks，react-query等，可以自行查阅。这些库确实非常有用，我也在使用。然而，这个系列的初衷是为了教人入门 React 后台管理系统的开发，从零开始构建并实现常用功能。为了更好地理解和应用 React Hooks，这个系列会列举几个例子来讲，以便大家后续根据自己项目的需求继续封装一些自定义hook，或者使用 ahooks 库来满足项目需求。

2024-05-28 09:57:19 872

原创 React后台管理（七）-- layout布局相关组件封装，以及涉及功能实现

本文将详细介绍页面布局的搭建过程，以及其中涉及的相关功能。主要包括头部、侧边栏和内容区域。我们将讲解其中用到的相关功能：如何注册子路由、监听路由变化、实现侧边栏收缩功能、observer监听器的使用、在头部展示和更新个人信息以及使用MobX进行信息管理、登录、登出和记录路由等相关功能的实现。下一篇讲【开发页面前准备—插槽以及函数组件传值】。关注本栏目，将实时更新。

2024-05-23 09:42:27 1425 2

原创 Vue3.0中实现的动态路由权限控制

动态路由权限控制是项目常用的功能，这里介绍一种方式，通过将后端权限码与本地路由的JSON配置ID进行匹配，能够有效地实现用户权限的控制。不同角色的操作项是根据权限码匹配到的路由进行区分的，这样可以确保每个用户只能看到与自己所属角色相关的操作项。随后，通过特定方法将其转换为路由格式，并通过addRoute方法动态添加路由，从而实现了灵活而精准的用户权限路由控制。

2024-07-15 09:55:43 510 1

原创 css设置弹性flex后，如果设置100vh高度不撑满的原因

但是如果此时设置第一个div的高度为100vh，父元素必须设置高度为height: 100% 或min-height: 100vh，才能实现第一个div高度完全占满，如果设置height：100vh，则无效，虽然父盒子撑满了，但是第一个盒子属于是。父元素设置height为100%，有两个子元素，第一个设置height:100vh，第二个设置flex:1，此时第一个高度无法撑满盒子。（2）第一个子元素：此时设置height：100vh就会生效了，高度可占满盒子。，因为给第二个盒子的flex：1。

2024-07-14 10:51:25 557

原创 React中使用usePrevious的意义是什么，为啥要用它

如上面代码，prevOption 和 prevClickEvent 使用 usePrevious 自定义 Hook 来存储前一个值的变量，作用是比较当前的 option 和 onClick 值与上一次的值是否相等。如果相等，则表示没有发生改变，不需要更新图表。通过比较前后值，可以避免不必要的更新和重复渲染，提高代码的性能和效率。usePrevious 是一个自定义 Hook，用于记录上一次的状态，以便在下一次渲染时进行比较。这对于需要比较前后值的场景非常有用，例如图表的更新和事件监听器的添加。

2024-07-13 09:21:09 397

原创 React+TS前台项目实战（三十）-- 首页构建之基于react-query和性能hook实现全页面数据渲染

有人可能会说频繁轮询接口会不会影响性能，当然会，但是我们做了一些措施，可以有效地优化性能。首先，我们使用了useMemo和memo等性能钩子函数，就是为了避免重复渲染。同时，使用useQuery处理请求时，它提供了一些性能优化的功能，比如自动缓存和懒加载

2024-07-12 09:21:18 1233

原创 React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染

还记得之前我们创建的高性能可配置Echarts组件吗？今天我们将利用它来呈现首页统计模块的数据可视化效果，借助这个组件，我们能够显著减少编写代码的工作量，会方便很多。下一篇讲【首页响应式构建之实现全页面数据】。关注本栏目，将实时更新。

2024-07-11 10:47:24 1142

原创 React+TS前台项目实战（二十八）-- 首页响应式构建之剩余模块布局

今天，我们继续完善首页剩余模块的响应式布局交互。通过关注点分离的方法，逐步切割模块至最小单元，并结合React的hook钩子函数，实现按需渲染，避免了渲染浪费，提升页面性能，尤其在实时轮询接口时至关重要。页面带有banner模块搜索模块搜索下拉结果列表切换语言模块区块模块列表交易模块列表，并且采用实时查询。下一篇讲【首页结合react-query库实现数据对接】。关注本栏目，将实时更新。

2024-07-10 10:32:29 599 2

原创 React+TS前台项目实战（二十七）-- 首页响应式构建之banner、搜索、统计模块布局

前面我们已经封装了这个项目基本要用到的全局组件了，现在就开始进入页面构建以及接口对接阶段了。首先，我们先来构建首页响应式布局，接下来会讲到真实接口对接，搭配react-query实现轮询，并使用memo，useMemo，usePrevious等钩子来优化页面，避免不必要的重新渲染。下一篇讲【首页响应式构建之区块、交易列表布局】。关注本栏目，将实时更新。

2024-07-09 10:08:15 741

原创解决后端限制导致前端配置跨域仍请求失败报504的问题

当然，并不是端口号一致就可以绕过跨域，还需要添加其他配置，比如前端请求需要发送带有application/vnd.api+json头部信息，这样服务器就就可以将 Access-Control-Allow-Headers 设置为 application/vnd.api+json，客户端在跨域请求中就包含这个头部信息。

2024-07-07 11:03:14 701

原创 ECharts在最新版本中使用getInstanceByDom报错处理

在 ECharts 的之前版本中，默认导出了一个名为 echarts 的对象，所以使用 import echarts from “echarts” 是没有问题的。但是在 ECharts 4.9.0 版本之后，默认导出不再是一个名为 echarts 的对象，如果还是使用 import echarts from “echarts”，就会报错。更换引用方式为 import * as echarts from “echarts”;如果按如下引用的话，会报错。

2024-07-06 11:44:18 237

原创 AntDesign上传组件upload二次封装+全局上传hook使用

在项目中，ant-design是我们常用的UI库之一，今天来二次封装常用的组件a-upload批量上传组件,让它用起来更方便。

2024-07-05 10:24:47 624

原创 React+TS前台项目实战（二十五）-- 全局常用排序组件SortButton封装

今天要封装的SortButton 组件，主要用在表格列排序上，运用于更新路由并跳转更新，起到刷新页面仍然处于当前排序数据。下一篇讲【全局常用组件Echarts封装】。关注本栏目，将实时更新。

2024-07-04 10:02:43 669

原创 React+TS前台项目实战（二十四）-- 全局常用绘制组件Qrcode封装

今天要封装的Qrcode 组件，是通过传入的信息，绘制在二维码上，可用于很多场景，如区块链项目中的区块显示交易地址时就可以用到。

2024-07-03 10:01:23 600

原创 React+TS前台项目实战（二十三）-- 基于属性自定义数值显示组件Decimal封装

今天要封装的Decimal 组件，是通过传入的属性进行定制化显示数值，在渲染时，会根据不同的情况显示整数部分、小数部分和单位，支持自定义样式、布局和单位，同时根据数值正负情况显示不同样式，适用于准确展示各种类型的数值数据。下一篇讲【全局常用组件Echarts封装】。关注本栏目，将实时更新。

2024-07-02 10:06:28 443

原创 React+TS前台项目实战（二十二）-- 全局常用导出组件Export封装

今天我们来封装一个带导出图标的导出组件。下一篇讲【全局常用组件Echarts封装】。关注本栏目，将实时更新。

2024-07-01 09:10:07 419

原创如何使用styled实现嵌套组件继承父组件Props以及样式定义

当使用styled-components将属性传递给嵌套组件时，可以通过将属性和样式定义应用于嵌套组件的父组件来实现。然后，通过组件继承或组件的props传递，属性和样式定义将被传递到嵌套组件中。// 引入styled-components库// 引入子组件总之，使用styled-components将属性和样式定义传递给嵌套组件实现了代码切割分离，看起来也简洁写，可以保持代码的可读性和可维护性。

2024-06-29 09:50:44 220

原创 React+TS前台项目实战（二十）-- 全局添加使用react-query请求库

今天这篇主要讲@tanstack/react-query的安装以及全局注入使用，为项目提供数据请求，缓存，轮训接口等功能，为接下来的自带接口配置，并实现搜索功能的Search组件做准备。下一篇讲【全局常用Search组件封装】。关注本栏目，将实时更新。

2024-06-27 09:09:07 464

原创 React+TS前台项目实战（十九）-- 全局常用组件封装：带加载状态和清除等功能的Input组件实现

今天我们来封装一个input输入框组件，并提供一些常用的功能，你可以选择不同的尺寸添加前缀显示加载状态触发回调函数自定义样式等等。这些功能在这个项目中已经足够了，无论你是一个经验丰富的开发者还是一个刚刚入门的新手，这篇文章都将提供有用的知识和实践经验，以帮助你在自己项目中封装输入框时更加高效。

2024-06-26 09:07:14 655

原创 React+TS前台项目实战（十八）-- 全局常用高阶渲染劫持组件封装

前面我们已经封装了懒加载Loading组件，可自行查阅具体代码及说明响应式加载动画Loading组件封装。本文我们就结合使用Loading组件，来封装一个高阶组件。下一篇讲【全局常用echarts组件封装】。关注本栏目，将实时更新。

2024-06-25 09:14:26 779

原创 React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。下一篇讲【高阶渲染劫持组件封装】。关注本栏目，将实时更新。

2024-06-24 12:02:50 441

原创 React+TS前台项目实战（十六）-- 全局常用组件Pagination封装

在上篇文章中，我们封装了表格组件Table，本文则继续封装配套使用的分页器组件。想看Table表格组件的，可自行查看全局常用组件Table封装下一篇讲【开始首页编码教学】。关注本栏目，将实时更新。

2024-06-23 10:19:21 719

原创 React+TS前台项目实战（十五）-- 全局常用组件Table封装

在这篇文章中，我们将对本系列项目中常用的表格组件Table进行自定义封装，以提高性能并适应项目需求。后期也可进行修改和扩展，以满足项目的需求。下一篇讲【全局常用组件Pagination封装】。关注本栏目，将实时更新。

2024-06-22 14:47:31 419

原创 React+TS前台项目实战（十四）-- 响应式头部导航+切换语言相关组件封装

在这篇博客中，我们将封装一个头部组件，根据不同设备类型来显示不同的导航菜单，会继续使用 React hooks 和styled-components库来构建这个组件，此外，也会实现切换国际化功能。

2024-06-21 10:00:11 1529

原创 React+TS前台项目实战（十三）-- 全局常用响应式加载动画Loading组件封装

高阶组件有几大有点，其中一个就是渲染劫持，如懒加载，是否显示该元素loading，这在项目中我们经常用到。毫无疑问，这个实战系列我们必然也要用到它，本文主要封装这个loading组件，为了后期开发页面使用。

2024-06-20 09:15:34 656

原创一步步教你在React中使用requestAnimationFrame实现动画，提升性能！

有时候我们要做一个组件的动画效果，想到的就是用css来控制，但是会有一些缺点，只能实现一些简单的动画效果，无法实现更复杂的动画效果；动画帧无法控制。如果想实现复杂和较精确的动画效果，就需要用requestAnimationFrame，它可以实现更好的性能和更好的灵活动画控制。而且可根据浏览器刷新率来决定每帧的执行时间，保证了动画的流畅性。接下来我们使用requestAnimationFrame来实现一个动画效果，元素透明度从0到1显示后，清除该元素，前面有讲过，这里做个详细分析，教你一步步学会使用。

2024-06-19 09:11:23 567

空空如也

空空如也