- 博客(31)
- 收藏
- 关注
原创 解决前端if else判断过多重复
在前端项目中,如果你发现代码中存在过多连续的if-else判断语句,这通常意味着代码复杂度较高,可读性和维护性下降。
2023-10-30 15:22:52
224
原创 改变this指向的方法
以下这些方法允许你在JavaScript中更灵活地控制this的指向,以适应不同的情况和编程需求。选择最合适的方法取决于你的具体用例和代码结构。bindbind方法创建一个新的函数,其中this关键字被绑定到指定的值。这样可以确保在调用函数时,this指向绑定的值。
2023-10-30 09:39:27
57
原创 react组件通信以及和vue组件通信的主要区别
4. 语法和API不同:React使用JSX语法和一些特定的API(如setState方法)来操作组件状态和渲染。1. 数据流向不同:React中,数据是通过props属性从父组件向子组件单向传递的,而Vue中则可以通过props属性以及子组件的$emit方法实现双向绑定。3. 组件生命周期不同:React中组件的生命周期分为三个主要阶段:挂载、更新和卸载。在子组件中,可以通过props.name获取父组件传递的字符串,通过props.handleClick调用父组件传递的函数。
2023-10-27 16:50:35
166
1
原创 useRef
useRef在React中的主要作用是创建持久化的引用,可以用于访问DOM元素、存储变量以及保存组件实例等场景。并通过current方法输出页面节点(不调用current则输出一个对象)引用对象在组件生命周期内保持不变。
2023-10-27 16:09:21
80
1
原创 react条件渲染和列表渲染
React中的条件渲染可以通过JSX语法和条件表达式来实现。具体地,可以在组件的render方法中使用if、else if和else语句或者三元运算符等来根据条件返回不同的组件结构。2. 使用map()方法遍历该数组,对每个元素返回一个表示该元素的React组件(或JSX元素)只要组件的props或state发生变化,组件就会重新渲染,因此可以通过改变状态来控制条件渲染。3. 将所有组件放置在一个父元素中,并将该父元素作为返回值。在React中,可以使用数组的map()方法来实现列表渲染。
2023-10-27 13:53:51
223
1
原创 react事件的添加方式
在函数组件中,可以使用Reactf的Hooks来定义事件处理函数,并通过使用useCallback来避免不必要的函数重新创建。将处理函数直接传递给JSX元素的事件处理函数属性中。在组件的JSX代码中直接定义事件处理程序。在类组件中使用箭头函数来定义事件处理程序。在类组件中定义事件处理程序作为类的方法。生命周期方法中添加事件监听器。
2023-10-27 11:13:42
227
1
原创 路由守卫,A页面完成才能进B页面的权限
路由守卫(Route Guards)是一种常见的技术,用于在导航到某个页面前执行一些逻辑判断。通过路由守卫,你可以实现在进入某个页面之前进行权限检查、数据加载等操作。
2023-10-26 10:57:55
96
1
原创 float和BFC
子元素会保持原来在父级的显示方式,但是会跟随父级浮动到对应位置,(父级的浮动不能被继承)。BFC理解为一个封闭的箱子,箱子内部的元素任何操作,都不会影响到外部元素。二、Block Formatting Contexts (BFC。a.给父元素设置overflow:hidden(触发bfc);b.在盒子内添加一个块 属性设置为clear:both;元素浮动后会脱离正常的文档流,不再占据原来的位置,c.父元素盒子添加 display:flex;给元素添加float属性,d.父元素盒子设置高度(不推荐)
2023-10-25 17:09:17
80
原创 react状态监听
reaction 也是 MobX 中的一个函数,用于创建一个响应式函数,但它与 autorun 不同,它有两个参数,第一个参数是一个数据函数,第二个参数是一个副作用函数。autorun 是 MobX 中的一个函数,用于创建一个响应式函数,当依赖的可观察数据发生变化时,这个函数会自动运行。autorun接收一个函数作为参数,该函数监测的函数值发生变化时,函数执行。reaction 用于创建响应式函数,可以根据可观察数据的变化执行不同的操作,通常需要返回一个值。autorun和reaction。
2023-10-24 16:59:15
261
原创 防抖与节流
防抖(Debounce)和节流(Throttle)是两种可以节省性能的编程技术,两者的目的都是为了优化性能,提高用户体验,都是基于 DOM 事件限制正在执行的 JavaScript 数量的方法,用于控制函数执行频率的技术来解决不同问题。防抖用于确保函数在一段时间内只执行一次,而节流用于限制函数的执行频率。您可以根据具体的应用场景选择使用哪种技术。:节流是确保函数以一定的频率执行,通常用于限制连续触发的事件,如滚动事件。:防抖是确保在一段时间内只执行一次函数,通常用于处理频繁触发的事件。
2023-10-19 17:18:51
38
原创 深拷贝和浅拷贝
浅拷贝是指创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝,对于非基本类型的属性值(如对象、数组),则仍然是引用(即两者共享同一个内存地址)这就意味着,修改新对象的属性值对象会影响到原对象,因为它们引用的是同一个对象。总之,如果原始对象中的属性值是对象或数组,这些内部的对象或数组仍然是共享的。这意味着,对于深拷贝后的对象,即使原对象的属性值发生了变化,深拷贝后的对象的属性值也不会受到影响。这意味着,对于浅拷贝后的对象,如果原对象的属性值发生了变化,浅拷贝后的对象的属性值也会跟着发生变化。
2023-10-17 15:45:14
37
原创 less&&sass预处理器
预处理器Less和Sass都是用于编写CSS的工具,它们的主要区别在于以下几点:1. 语法:Less使用类似于CSS的语法,而Sass使用类似于编程语言的语法,包括变量、函数、条件语句和循环等。2. 扩展性:Sass提供了更多的扩展功能,如@extend、@mixin和@function等,可以使样式表更加模块化和可重用。3. 编译方式:Less需要客户端编译,即需要在浏览器中加载Less.js文件进行编译,而Sass则需要在服务器端进行编译,然后输出为纯CSS文件。
2023-10-17 09:22:14
86
原创 promise api(all,any,race,resolve,reject)
Promise API是一组用于操作Promise对象的方法集合,这些方法可以方便地处理Promise相关的异步操作,提高代码的可读性和可维护性。
2023-10-13 11:32:24
109
原创 vue中组件通信的方式有哪些
一、Props(父子组件通信)二、自定义事件(子父组件通信)三、$parent 和 $children(父子组件通信)四、$refs(父子组件通信)五、Vuex(非父子组件通信)
2023-10-12 14:38:17
65
原创 uniapp微信小程序项目动态获取node服务器内图片资源
3.node内app.js配置获取public下资源。4.uniapp的main.js文件内配置公共方法。
2023-04-24 20:09:27
692
1
webpack自定义框架脚手架(react cli、vue cli)
2023-12-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人