- 博客(41)
- 收藏
- 关注
RSS订阅原创 next.js
Next.js是一个基于React的React框架，用于构建React应用程序的服务器端渲染（SSR）和静态网站生成（SSG）。在Next.js中，可以通过文件命名的方式来实现动态路由，如pages/posts/[id].js，其中[id]表示动态参数。有利于SEO和首屏加载速度。静态网站生成（SSG）：在构建时生成HTML文件，只需在浏览器端进行静态资源的加载，适用于内容稳定的静态网站。Next.js支持在页面级别导入CSS文件或使用CSS-in-JS库，还可以通过CSS模块化来避免全局污染。
2024-03-05 17:37:43
202
原创 【无标题】
Composition API是Vue 3引入的新特性，提供了一种更灵活的方式来组织组件逻辑，可以将相关代码聚合在一起，提高代码的可复用性。Composition API：引入了Composition API，允许开发者按逻辑功能组织代码，提高代码的可复用性和可维护性。Teleport可以帮助开发者在组件内部控制组件在HTML DOM结构中的位置，解决了在组件内部无法控制DOM位置的问题。Vue 3提供了Suspense组件来处理异步组件的加载状态，用户可以在组件中显示loading状态或处理加载错误。
2024-03-05 17:35:40
280
原创 react
2、React的特点包括：虚拟DOM（Virtual DOM）实现高效的DOM操作、组件化开发、声明式编程风格、单向数据流、生命周期方法等。类组件具有状态和生命周期方法。1、React Hooks是React 16.8引入的新特性，可以让函数组件拥有类组件的功能，如状态管理、生命周期方法等。3、Hooks可以解决类组件中存在的代码复杂度、逻辑重复、难以理解和测试等问题，使得函数组件具备了类组件的能力。2、进行状态提升可以避免状态的多次传递和保持组件之间的数据同步，提高代码的可维护性和复用性。
2024-03-05 17:29:25
574
原创 React为什么使用jsx
React 团队认为 JSX 不会引入太多新的概念，编码更纯净，更具有可读性，更贴近 HTML。而对于 JSX 本身来说，是 React.createElement() 函数的语法糖，createElement() 对参数进行拆解后，发起 ReactElement 调用生成虚拟 DOM 对象。，它仍然是 JavaScript，就连条件表达式和循环都仍然是 JavaScript 的方式，链接：https://juejin.cn/post/6936113538238775333。，更贴近 HTML。
2024-02-27 14:16:16
165
原创 同步和异步的区别
需要注意的是，在异步代码中，由于代码是非阻塞的，所以需要使用适当的方式来处理异步操作的结果，如回调函数、Promise、async/await 等。这样可以确保在异步操作完成后，能够正确地处理操作的结果。阻塞与非阻塞：同步代码会阻塞程序的执行，即在执行同步操作时，程序会一直等待操作完成后才能继续执行后面的代码。而异步代码是非阻塞的，当执行异步操作时，程序可以继续执行后续的代码，无需等待操作完成。而在异步代码中，代码不会等待某个操作完成，而是继续往下执行，当操作完成后，系统会通知相应的回调函数进行处理。
2023-11-20 08:39:16
45
原创 useEffect和useLayoutEffect区别
useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。
2023-11-15 08:25:24
38
原创 flex：1
当设置了 flex:1 属性时，代表 flex-grow: 1、flex-shirnk：1、flex-basis：0%这3个属性是可以单独进行设置的。
2023-11-14 09:11:38
26
原创 useMemo和useCallback
/ 在我们渲染页面时，有很多的函数和变量在没有被调用，但却触发并执行，父组件内部的一部分在渲染是，子组件也会重新渲染等，这样就会造成大量的内存消耗。// 可以用来存储内部函数计算出的值，这样每次调用时就不需要再运行内部计算函数，以提高性能，除非依赖的值改变了，否则不会重新计算。// 3、如果传入的数组中有依赖项， 则依赖项的值改变了，useEffect 才会执行。// 返回一个记忆值，在依赖参数不变的情况返回的是上一次计算的值。// 内部一般都是存放 需要计算的值的 计算逻辑。
2023-11-14 08:22:20
61
原创 HOC、副作用、纯函数
higher order commponent 高阶组件 是纯函数，没有副作用 传入组件 return组件。抽离重复使用代码、实现组件的复用。相同的输入有相同的输出。
2023-11-12 12:38:16
23
原创 伪数组和真数组的区别
3、伪数组是一个Object，真数组是Array。4、伪数组的长度不可变，真数组的长度是可变的。1、拥有length属性。2、不具有数组的方法。
2023-11-10 14:58:23
39
原创 原型和原型链
2.原型链：对象都有–proto–属性，这个属性指向它的原型对象，原型对象也是对象，也有–proto–属性，指向原型对象的原型对象，这样一层一层形成的链式结构称为原型链，最顶层找不到则返回null。原型可以放一些属性和方法，共享给实例对象使用。
2023-11-10 14:53:25
20
原创 localStorage、sessionStorage和cookie的区别
cookie 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。sessionStorage 和 localStorage虽然也有存储大小的限制，但比cookie大得多，sessionStorage 和 localStorage不会自动把数据发给服务器，仅在本地保存。，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
2023-11-10 14:41:20
71
原创 null和undefined的区别
undefined 表示未定义，声明没有值。typeof undefined 返回"undefined"null 表示空值 没有获取到。typeof null 返回"object"
2023-11-10 14:35:58
23
原创 flex常用的容器属性
flex-direction: 设置容器中的主轴方向flex-wrap: 项目在主轴方向上是否换行显示justify-content: 设置容器中的项目在主轴上的对齐方式align-items: 单行项目在侧轴上的排列方式align-content: 多行项目侧轴上的对齐方式flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap
2023-11-10 14:08:44
29
原创 真实dom和虚拟dom的区别
3）真实dom更新时会创建一个新的dom，虚拟dom的更新会更新jsx。2）真实dom可以直接更新html而虚拟dom不可以。4）真实dom操作开销比较大，虚拟dom操作很容易。5）虚拟dom不会浪费内存。1）虚拟dom更新更快。
2023-11-10 13:45:36
57
原创 import和require的区别
因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高。require是赋值过程，并且是运行时才执行。import是解构过程， 并且是编译时执行。require性能底，可以写在其他位置。import性能高，写在顶部。
2023-11-10 13:27:26
28
原创 HTML、XHTML、XML有什么区别
XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越小了。HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散。
2023-11-10 12:17:55
20
原创 Html和xhtml有什么区别
最主要的不同: XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
2023-11-10 12:16:58
19
原创 px、em和rem的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。Em的值不是固定的，并且em会继承父级元素的字体大小。rem是CSS3新增的一个相对单位，可以理解为"root em"，相对于根节点html的字体大小来计算的，chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。
2023-11-10 12:15:42
22
原创 src与href的区别
href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
2023-11-10 12:14:28
26
原创 webpack
核心三： 加载器 （Loader）, webpack只能识别js文件，通过Loader去处理非JS文件。核心二： 出口（outPut）,打包出口，项目打包好之后文件存放的位置（默认./dist）核心四： 插件（Plugins）,第三方提供的功能，帮助我们优化性能，下载下来直接使用。核心一： 入口（Entry） ,文件入口，项目打包的起始点。核心五： 模式（Mode） , 打包模式 开发模式（
2023-11-09 17:18:31
28
原创 Input使用debounde遇到的坑
事件处理程序经过 合成事件（SyntheticEvent）的实例传递，SyntheticEvent 是浏览器原生事件跨浏览器的封装。这里就涉及到了 react 事件系统 中的一个概念：合成事件。SyntheticEvent 是池化的. 这意味着 SyntheticEvent 对象将会被重用，而且全部的属性都会在事件回调被调用后被 nullified。经过了解事件系统，也就不难理解为何会报错了。由于通过 debounce 包装后的回调函数，变成了一个异步事件，在池化后被 nullified 了。
2023-11-09 09:49:52
88
原创 算法-稍难
/在数学上，这一数列以如下递推的方法定义：F(0)=1，F(1)=1, F(n)=F(n - 1)+F(n - 2)（n ≥ 2，n ∈ N*）。// 斐波那契数列（Fibonacci sequence），又称黄金分割数列。//其数值为：0、1、1、2、3、5、8、13、21、34……
2023-11-09 09:09:55
22
原创 constructor，proto，prototype的三角关系
实例对象的proto指向构造函数的prototype所指向原型对象。原型对象的constructor指向构造函数。构造函数的prototype指向原型对象。
2023-11-08 05:10:34
22
原创 什么是设计模式？
概念：设计模式是一套反复被使用的代码，设计经验的总结，使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。设计模式让代码变得工程化，设计模式是软件工程的基石。2.发布订阅模式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。1.js工厂模式，去做同样的事情，实现同样的效果，解决多个相似的问题，这时候需要使用工厂模式。3.单例模式：单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点。
2023-11-08 04:53:15
24
原创 重绘和回流是什么呢？
重排（回流）：当渲染树需要更新并且DOM尺寸（宽高）发生了变化，同时其他的DOM就会受到影响，浏览器就会重新构建渲染树，这个过程就叫重排（回流）触发重排：添加或删除可见的 DOM ，DOM 位置发生变化，DOM 尺寸大小发生变化，页面初次 渲染，浏览器窗口尺寸发生变化。重绘单单从字面意思来看，就是重新绘制，那什么情况下会触发重绘呢？重绘：浏览器重新绘制收到影响的部分到屏幕上，这个过程叫做重绘。重排单从字面意思就是，重新排列，那什么情况下会触发重排呢？重绘不一定会重排（回流），重绘和重排（回流）的关系。
2023-11-07 17:32:42
23
原创 前端性能优化
是指浏览器会先发送一个请求到服务器，通过last-modified和etag验证资源是否命中客户端缓存，如果命中，服务器会将这个请求返回，但不会返回请求的资源数据，依然是从缓存中读取资源，如果没有命中，无论是资源过期或者没有相关资源，都需要向服务器发起请求，等待服务器返回这个资源。浏览器同域名的连接数是限制是多少呢?是指在一些对数据时效性要求不高的页面，第一次请求到数据后，程序将数据存储到本地存储，下一次请求的时候，先去缓存里面取数据，如果没有的话，再向服务器发起请求。最大的瓶颈点来源于请求阻塞。
2023-11-07 17:27:18
20
原创 防抖和节流
函数防抖（debounce）就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。典型场景：高频事件、快速点击、鼠标滑动、resize事件、scroll事件。代码思路：利用定时器，等定时器执行完毕，才开启定时器（不要打断）lodash的debounce（防抖）和throttle（节流）代码思路：利用定时器，每次触发先清掉以前的定时器（从新开始）防抖：单位时间内，频繁触发事件，只执行最后一次；节流：单位时间内，频繁触发事件，只执行一次；
2023-11-07 09:35:50
21
原创 react的setstate是同步还是异步
React的setState同步异步问题指的是在修改state后，页面渲染是否立即更新的问题。如果setState是同步的，那么在修改state后，页面会立即更新；如果是异步的，那么修改state后，页面不会立即更新，需要等待setState执行完成后才会更新。React的setState默认是异步的，但是可以通过setState回调函数、Promise和async/await等方式实现同步更新。
2023-04-26 10:57:18
273
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人