前端理想哥-CSDN博客

原创为什么要用max-age替代Expires？

比如，有个用户把自己电脑本地时间修改成了前一天，那么就会发现，该用户访问这个网站时，本来需要重新去服务器请求资源，但因为该用户修改了本地时间，导致一直都是使用了缓存中的资源。是一个服务器时间，而用户本地电脑是客户端时间，如果用户故意去改变了本地的客户端时间，就会导致Expires的效果出现问题了。，如果说本地时间小于这个过期时间，它就会去直接读取缓存中的资源，在这里，就会出现一个问题了。大家可以看到，它是一个时间长度，意味着这个资源它会在这个时间长度内都是有效的。计算的时间基准是来自于用户的客户端。

2023-11-01 18:57:47 222 1

原创为什么不建议你对图片开启Gzip压缩？

很多朋友可能会发现，对于JS、CSS、HTML这些文件来说，当你开启Gzip压缩之后往往都会压缩到原有体积的三分之一，但是呢，对于图片开启Gzip压缩之后，体积基本没有啥变化，这是为什么呢？是使用一种特别的方法为信号源中的每个符号设定一个二进制码，出现频率更大的符号会获得更短的比特，出现频率更小的符号会被分配更长的比特，以此来提高数据的压缩率，提高传输效率。如果文件中有两块相同的内容，我们就可以使用两块相同内容之间的距离和长度来替换后一块内容，这样文件的整个体积就可以变小了。，所以没有必要用Gzip的。

2023-11-01 18:42:37 353 1

原创一篇文章带你彻底了解flex布局

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。flex-shrink: 指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器时才会发生收缩，其收缩的大小是依据flex-shrink的值。此属性控制侧轴的方向和新行排列的方向。我们确定了弹性容器的主轴与侧轴，弹性项目的宽和高，怎么来确定对应的主轴尺寸和侧轴尺寸？

2023-11-01 18:18:10 118 1

原创 useEffect 是怎么判断依赖项变化的？

大家可以看到，图中代码定义了一个值为b的数组，然后把b作为了useEffect的依赖项，本意是希望b发生改变后，会触发useEffect的回调函数，若b没有改变，则回调函数不执行。但是，当你实际运行代码时，如果你觉得对自己有帮助，欢迎给理想哥一个关注，也可以私聊理想哥加入前端岗位内推群，我们会经常在群里发布各大公司急招岗位和面试求职经验，帮助大家尽快的找到工作。要说明白这个问题，我们可以来看看 useEffect 的源码，这张图是useEffect源码中每次用来比较依赖项是否变化的方法，

2023-10-26 15:06:22 529

原创 JS中异步任务为什么分为微任务和宏任务？

所以，这个时候异步任务回调通知的模式就出现了，JS引擎会在等待异步任务准备的同时去执行其他同步任务，等到异步任务准备好了，再去执行回调函数，这种模式极大地利用了空闲时间，提升了代码执行效率。而在事件循环中，又会分为微任务和宏任务，每一轮循环中的微任务其实就是在插队执行，给微任务的代码一个提前执行的机会，如果不能插队，那就只能放在把紧急任务放在队尾去执行了。在这其中，对于异步任务而言，如果没有特别处理，JS引擎在执行异步任务时，应该是会存在等待的，在等待期间不会去做其他事。接下来，我们来详细了解下。

2023-10-25 18:05:41 85

原创面试官是是这样坑你的，你知道吗？

大家好呀，我是前端理想哥。今天理想哥想和大家分享几个面试官坑候选人的一些方法，这个坑呢，指的是面试官他会用一些不常用的方式来对候选人进行突击检查或者测试，想必很多同学在面试的过程中应该都遇到过这种情况，也有一些同学可能因为不适应这种方式而导致面试结果不佳。今天，理想哥想分享几个帮助大家避避坑。

2023-10-24 16:07:37 104

原创切忌：没有准备好，就一定要勇敢的找HR推迟面试

但是，理想哥想和大家说的是，千万千万不要这样，如果自己还没有准备好，就一定要勇敢的去找HR或者面试官重新约一个时间，和HR说清楚理由，他们是不会拒绝往后推迟几天面试的，一定要等你完全准备好了再去面。最近，理想哥发现好多人在面试的过程中都会有一个问题，收到了想去的公司面试邀约，但是他明明自己还没有准备好，又碍不住HR热情的邀请，或者不敢去找HR或者面试官去改时间，然后呢，就只能硬着头皮去面了。没有准备好面试的时候呢，你就会心虚，就会不自信，会影响你面试的状态，也就更不可能正常甚至超常发挥了。

2023-10-24 15:57:41 948 1

原创 useEffect和useLayoutEffect的延迟、同步是什么意思？

的同步，指的是，effect和组件渲染是在一个任务调度内，组件渲染完了后，立马开始同步进行effect的执行了。中的延迟执行，指的是effect会在组件渲染任务调度函数结束后，再单独调用一次任务调度函数，这样做的好处就是，effect的调用可以单独进行，不会加长组件渲染的任务时间，也就不会阻碍组件的渲染了。所谓的延迟和同步，其实指的就是。

2023-10-20 15:19:42 194 1

原创 useState为什么返回数组而不是对象？

不过，返回数组其实也有一些不足，比如，返回值必须是按照顺序，顺序错了，值也就错了。大家可以看到，相比数组的解构，对象的解构没有顺序，且解构的变量必须和解构前的属性同名，才能取到正确的值。，比如，one是在数组第一项，所以对应的值就是 Jack，而two在数组第二项，对应的值则是 Jay，大家好，我是前端理想哥，今天，我们来聊聊。

2023-10-20 11:20:55 148 1

原创 useState和useReducer有啥区别？

比如你传了个初始值，但是不是你想要的，得用一个函数处理下，那你就可以把这个函数作为第三个参数传入，useReducer中会自动进行处理的。先说结论：useState和useReducer都是用于函数组件内部定义状态的，区别在于，useState用于简单的状态管理和局部状态更新，而useReducer用于复杂的状态逻辑和全局状态管理。

2023-10-19 17:45:07 246

原创 setState到底是同步还是异步？

只有上面这些条件都满足了，才会进行同步任务，也就是说，当你使用createRoot创建应用后，所有的事件都会自动进行批量处理了，但是如果你还是依然使用render进行渲染，那么，事件流程还是和react 18之前的机制一样。创建应用后，所有的事件都会自动进行批量处理了，但是如果你还是依然使用render进行渲染，那么，事件流程还是和react 18之前的机制一样。之前，只要是进入到了react 的调度流程，就是异步处理，异步处理就是批量处理，没有进入到react 的调度流程，就是同步处理。

2023-10-19 09:15:54 72

原创 React18中为什么要用 createRoot 代替 render

这种做法有个问题，当我们渲染 APP 组件时，root根节点需要创建一次，如果我们再继续渲染另一个组件，就像图中这样，那么root根节点就又需要重新创建一次，太浪费资源了。就解决了这个问题，就像图中这样，把根节点的渲染单独抽离出来，这样可以实现任意渲染新组件，而根节点不会重选创建，可以实现复用。所以，大家的项目如果已经升级React18了，那赶紧去尝试下createRoot吧。，控制台会警告你图中这个信息，然后建议你用。

2023-10-19 09:11:10 603 1

原创一篇文章讲清楚React18的新功能：startTransition

在图中这段代码中，setSearchQuery会被标记为非紧急事件，浏览器会优先处理用户输入内容，如果此刻正在渲染联想的结果，而用户又输入内容了，则浏览器会先中断渲染联想内容，而优先响应用户输入内容。在react中，我们的更新任务分为两种，一种是紧急更新，另外一种是过渡更新，紧急更新指的是用户点击、输入这些交互操作，需要浏览器可以快速响应，过渡更新指的是视图之间的切换，不需要快速响应的。，具体内容大家可以下去了解下。

2023-10-19 09:08:12 227

原创深入了解Redux的中间件机制

如果没有中间件机制，当我们触发了action后，就会直接去执行reducer修改状态值，然后更新UI了，中间件机制的出现，就像一个中间商一样，在action和reducer中间又隔了一层甚至多层，可以让你加强和拓展dispatch的功能，比如日志记录、故障监控上报、与异步 API 通信等等。以上，就是所有内容了，我们讲了什么是中间件，并手动实现了一个简单的中间件，大家如果对中间件感兴趣，也可以再详细了解下。，中间件之间可以实现链式调用，即每个中间件都可以访问上一个中间件，，每个中间件都是实现了一个功能，

2023-10-18 21:18:42 51

qianduanlixiangg的博客