- 博客(482)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 react hooks--useReducer
很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是◼ 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分； 或者这次修改的state需要依赖之前的state时，也可以使用；useState 的替代方案，它接收一个的 reducer 处理函数，并返回当前的 state 和 配套 的 dispatch 方法。使用方法与 redux 非常相似。
2024-09-19 10:27:05
264
原创 react react18+vite+typeScript+eslint+prettier+husky+lint-staged+commitlint 快速搭建项目环境
每次看 Github 仓库的时候，总感觉有些不顺眼。原来是提交附带的信息乱糟糟的，都是"新增xx功能"，"修复xxBUG"，非常的不工整，看着太不舒服啦🤯。不要慌，我们可以使用 CommitLint 对提交的信息进行规范。在 package.json 里增加以下配置},在项目根目录下新建以下配置文件types: [{ value: "feat", name: "✨ feat: 一个新的特性" },{ value: "fix", name: "🐛 fix: 修复一个Bug" },
2024-09-18 14:52:34
994
原创 TS React 项目中使用TypeScript
消息: {this.props.msg}定义复杂数据类型后，可以导出数据类型方便其他组件引入使用。state = {}render() {return (消息: {this.props.msg}姓名：{this.props.user.name}年龄：{this.props.user.age}
2024-09-18 11:05:22
1258
原创 TS Vue项目中使用TypeScript
有时候我们也想扩展像lib.d.ts这样的声明类型，可以在全局下进行使用，所以TS给我们提供了global.d.ts文件使用方式，这个文件中定义的类型都是可以直接在全局下进行使用的，不需要模块导入。当然并不是所有的JS模块都需要下载第三方的@types，因为有些模块默认就会代码d.ts的声明文件，例如moment这个模块，安装好后，就会自带moment.d.ts文件。导入方式是必须在顶部进行添加的，不能在其他语句中引入，这样就不能在后续的某个时机去导入，所以TS提供了动态引入模块的写法。
2024-09-18 09:56:50
1266
原创 鸿蒙 ArkUI组件三
属性时，minWidth/minHeight会取其中的最大值，maxWidth/maxHeight会取其中的最小值，调整后的值作为FlowItem的constraintSize处理。可使用columnsTemplate('repeat(auto-fill,track-size)')根据给定的列宽track-size自动计算列数，其中repeat、auto-fill为关键字，track-size为可设置的宽度，支持的单位包括px、vp、%或有效数字，默认单位为vp，使用方法参见示例2。移动窗口式的布局模式。
2024-09-18 07:54:58
906
原创 react hooks--useContext
◼ 类组件可以通过 类名.contextType = MyContext方式，在类中获取context； 多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；
2024-09-18 07:53:00
900
原创 vue MVC设计模式与MVVM设计模式
于是2009年Angular.js横空出世，带来了全新的MVVM设计模式，让开发者眼前一亮，除了M和V层以外，就是这个VM层啦，即：viewModel层。使用Vue框架开发前端项目，最大的优势就是再也不用进行复杂的DOM操作了，我们只要关心数据的变化即可，Vue框架会帮我们把复杂的DOM进行渲染，这背后都要归功于他的设计思想，即MVVM设计模式。随着Ajax技术的流行，前后端分离开发越来越流行，前端需要处理复杂的视图与数据，迫使前端也急需一种设计模式来进行分层处理，所以MVC设计模式开始进入前端领域。
2024-09-17 19:27:38
702
原创 react hooks--useLayoutEffect
◼ useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新； useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；官方更推荐使用useEffect而不是useLayoutEffect。◼如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。
2024-09-16 23:54:51
566
原创 鸿蒙 ArkUI组件二
textAlign属性用于设置文本在其容器中的水平对齐方式。@Entry@Componentbuild() {Column() {Text('左对齐')Text('中间对齐')Text('右对齐')设置无输入时的提示文本。TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本'})设置输入框当前的文本内容TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
2024-09-16 13:32:23
1390
原创 react hooks--useEffect
React 在构建用户界面整体遵循函数式的编程理念,即固定的输入有固定的输出,尤其是在推出函数式组件之后，更加强化了组件纯函数的理念。但实际业务中编写的组件不免要产生请求数据、订阅事件、手动操作 DOM 这些副作用 effect ，这样难免让函数组件变得不那么纯,于是 React 提供 useEffect 和 useLayoutEffect 这样的 hook,给开发者提供专门管理副作用的方式。◼。
2024-09-16 13:29:11
1029
原创 react hooks--useState
useState 可以使函数组件像类组件一样拥有 state，也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用，底层又是怎么运作的呢，首先一起看一下 useState。问题：Hook 是什么?一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性使用模式：函数组件 + Hooks特点：从名称上看，Hook 都以 use 开头状态的使用：1 读取状态 2 修改状态。
2024-09-16 13:28:05
1360
原创 react hooks--概述
◼Hook是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。◼我们先来思考一下class组件相对于函数式组件有什么优势？◼ class组件可以定义自己的state，用来保存组件自己内部的状态； 函数式组件不可以，因为函数每次调用都会产生新的临时变量；◼ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑； 比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；
2024-09-15 18:54:38
1335
原创 react 高阶组件
高级组件到底能够解决什么问题？举一个特别简单的例子，话说小明负责开发一个 web 应用，应用的结构如下所示，而且这个功能小明已经开发完了。但是，有一天老板突然提出了一个权限隔离的需求，就是部分模块组件受到权限控制，后台的数据交互的结果权限控制着模块展示与否，而且没有权限会默认展示无权限提示页面。（如下图，黄色部分是受到权限控制的组件模块）那么小明面临的问题是，如何给需要权限隔离的模块，绑定权限呢？那第一种思路是把所有的需要权限隔离的模块重新绑定权限，通过权限来判断组件是否展示。
2024-09-15 18:53:59
1418
原创 鸿蒙 ArkUI组件一
在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加10vp的间距...Swiper支持通过设置自定义切换动画，可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性实现自定义切换动画。@Entry@Componenti++) {build() {Column() {Swiper() {})// 同组页面完全滑出视窗外时，重置属性值} else {
2024-09-14 15:31:20
1376
原创 鸿蒙开发基础
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。可组合：允许开发者组合使用系统组件、及其属性和方法。可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。我们可以在ets。
2024-09-14 15:29:10
595
原创 vue vueUse利用useInfiniteScroll API 实现虚拟滚动
开始使用 | VueUse 中文网VueUse元素的无限滚动。详细解析地址。
2024-09-14 10:22:18
398
原创 react 动画_样式处理
而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案 可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的元素； 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 支持所有的css特性：伪类、动画、媒体查询等； 编写起来简洁方便、最好符合一贯的css风格特点； 等等...事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点 Vue通过在.vue文件中编写。
2024-09-14 08:03:57
991
原创 vue3 动态 svg 图标使用
在做后台管理系统中，我们经常会用到很多图标，比如左侧菜单栏的图标当然这里element-ui或者组件库都会提供图标但是在有些情况下 element-ui 或者 element-plus 组件库提供的图标满足不了我们的需求时，这个时候我们就需要自己去网上找一些素材或者UI给我们一些.svg的图标文件那么这个时候我们如何像使用组件一样很方便地去使用？只需要在需要的地方引入组件、传入图标名字就可以了。
2024-09-13 17:44:26
450
原创 react 组件化开发_生命周期_表单处理
我们从上面可以清楚地看到，组件本质上就是类和函数，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState 、 useState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。因此，函数与类上的特性在 React 组件上同样具有，比如原型链，继承，静态属性等，所以不要把 React 组件和类与函数独立开来。接下来，我们一起着重看一下 React 对组件的处理流程。
2024-09-13 09:39:44
1943
原创 react 事件处理
Web应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。如果原生DOM有一个监听事件，我们可以如何操作？
2024-09-13 08:57:44
1513
原创 react 基础语法
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
2024-09-13 08:56:45
1867
原创 uniapp 手摸手实现左右菜单联动
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
2024-09-12 16:13:43
164
原创 react 使用 IntersectionObserver API 实现自动滚动
网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大,容易造成。目前有一个新的，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。
2024-09-12 16:02:03
174
原创 TypeScript 扩展
外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明这些库通常有两种类型声明方式：方式一：在自己库中进行类型声明（编写.d.ts文件），比如axios方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件。
2024-09-12 15:40:31
1081
原创 TS 泛型_索引类型_映射类型
平时开发中，我们代码复用时需要去封装函数或者类，有时候封装时数据的类型需要外部传入给你，这样的数据类型就是称为泛型。(Type 类型的数组)，因为只要是数组就一定存在 length 属性，因此就可以访问了。条件类型就是在初始状态下并不直接确定具体类型，而是通过一定的类型运算得到最终的变量类型。绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型。实际上，JS 中的数组在 TS 中就是一个泛型接口。K：是对象类型名称，T：是剔除K类型中的属性名称。泛型的类型变量可以有多个，并且。
2024-09-12 15:39:07
406
原创 TypeScript接口
在编程中，接口是一种编程规范，它定义了行为和动作规范，接口起到了规范的作用，比如长方形必须要有长和宽，至于是多少不管，但是必须要有，关键字定义接口，定义好后，接口内部是属性可以起到约束作用。接口可以定义一个函数类型，可以对函数的参数以及返回值做约束。：右侧的any代表对象中属性的值是任意类型。当一个对象类型被多次使用时，一般会使用接口（函数的参数以及返回的数据类型都可以使用。：代表对象中的键必须是字符串，其中。）来描述对象的类型，达到复用的目的。接口去定义，起到复用效果。：代表数组的下标必须是数字。
2024-09-12 15:38:00
400
原创 TypeScript类
类就是拥有相同属性和方法的一系列对象的集合，类是一个模具，是从这该类包含的所有具体对象中抽象出来的一个概念，类定义了它所包含的全体对象的静态特征和动态特征。类有静态特征和动态特征【以大家最熟悉的人类为例】静态特征【软件界叫属性】姓名，年龄,地址,身份证号码,联系方式,家庭地址,微信号动态特征【软件界叫方法】吃饭，走路【再看桌子类】静态特征【属性】高度，宽度，颜色，价格，品牌，材质动态特征【方法】承载【来看订单类】
2024-09-12 15:37:17
1195
原创 TS 环境搭建
TS 官方文档TS 中文参考 - 不再维护TypeScript 是什么TypeScript 为什么要为 JS 添加类型支持?TypeScript 相比 JS 的优势。
2024-09-12 15:33:18
984
原创 TS 前置知识
（1）函数也是一个对象，当真正开始执行函数，执行环境【开发时为浏览器或控制台】会为函数分配一个函数对象变量空间和函数对象空间，函数对象变量用函数名表示，存在栈空间中， 函数对象空间是在堆中开辟的一个内存空间，这个空间中有一个默认的 prototype 属性，这个 prototype 属性就是一个原型对象属性【也叫对象变量】（2） 函数和构造函数的区别当通过 new 函数()时，此刻这个函数就是构造函数【 日后会演变成TS 类的构造器】
2024-09-12 15:31:48
1076
原创 vue2 自定义button组件开发
编写组件时应该API先行，先确定组件该如何给用户用，再根据API编写逻辑props的名称应该具备语义化，类型应该符合规范，并且可以添加自定义校验组件上绑定的类似于原生的事件，默认是不会被识别的，需要额外处理组件有一些设计需要整体把控，比如props与对应类名的匹配，这是我们故意设计的。
2024-09-12 08:00:05
257
原创 vue2 实现鼠标移入展开移出收起效果
也可以实现这种效果，但是使用这种方式实现的效果总体上是实现了，但是怎么看着都有点别扭的意思。这里需要实现的就是鼠标移入时展开，移出时收起，并且在展开和收起之间有一个过渡动画效果。当然除了用javaScript去实现也可以利用css3的。属性来实现，大致逻辑就是最开的时候其高度使其。
2024-09-11 12:53:58
117
原创 vue3 vue2 过渡到 vue3 ，路由差异和使用场景
例如，当页面做了过渡动效，我们希望过渡结束后再执行滚动。切换路由时页面回到之前的滚动位置。提示：如果返回一个 falsy 的值，或者是一个空对象，则不会发生滚动。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例。上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，可以将。如果想要在路由组件上使用转场，对导航进行动画处理，我可以使用。注意：跟之前版本不同的是，路由只能一个一个添加，不能批量添加。
2024-09-11 12:49:53
460
原创 vue3 那些可以让 Vue3 开发更加丝滑的小东西
如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。理想情况下，触发模态框的按钮和模态框是在同一个组件中，他们一起被渲染在 DOM 结构里很深的地方。要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。传入一个函数参数，该函数会立即执行，同时会响应式的最终函数内的依赖变量，并在依赖发生改变时重新运行改函数。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
2024-09-11 12:46:41
496
原创 vue2 中后台系统中，复杂表单的开发优化技巧
在中后台系统的日常开发中，表单必不可少，当表单内容比较多，例如有上百个字段（这一点都不夸张，血淋淋的现实）时，代码往往也变得复杂且难以维护，加上各种动态联动的表单校验，无疑让我们的页面开发过程雪上加霜，本文将结合自己平时的开发习惯，分享一下在大表单开发中如何处理复杂的表单校验，以及如何对表单进行拆分，减少单个文件堆积过多的代码内容。
2024-09-11 12:42:38
194
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人