weixin_42667381的博客

如果你使用路由库（如 React Router），你可以将路由配置信息存储在上下文中，以便多个组件可以轻松地访问路由信息，例如当前路径或路由参数。：确保在合适的地方创建上下文对象。通常，在应用程序的顶层组件中创建上下文对象是一个良好的实践，以便在整个应用中共享数据。使用上下文的主要目的是减少组件之间的耦合，但也要谨慎使用。是 React 中的一个 Hook，用于在函数组件中访问 React 上下文（Context）中的值。需要使用上下文对象：上下文的使用可能会让组件更难以理解和测试，因此需要谨慎使用。

如果依赖数组中的值没有变化，它会返回上一次创建的函数引用，否则会创建一个新的函数。接受两个参数，第一个参数是要缓存的函数，第二个参数是一个依赖数组，只有当依赖数组中的值发生变化时，才会重新创建函数。如果依赖数组为空，函数将永远不会重新创建。是 React 中用于性能优化的有效工具，可以帮助你避免不必要的函数创建和确保回调函数的稳定性。保持稳定性：确保传递给子组件的函数不会随着父组件的重新渲染而改变，有助于避免不必要的子组件渲染。可以确保子组件不会因为父组件的重新渲染而重新渲染，除非依赖数组中的值发生变化。

通俗来讲就是说，当前组件或者当前组件所在的父组件修改状态（state）时，我们不想让其 render 函数中的某个节点或者自身因为不相关的状态变化而去重新渲染造成性能上的浪费，可以使用useMemo来解决这个问题。如果当前的依赖数组和上一次的依赖数组完全相同（即每个元素都严格相等），React 会认为依赖项没有变化，不会重新计算。中，第一个参数是一个计算函数。的依赖数组应该包含所有在计算函数中使用的变量，以确保在依赖项变化时重新计算。在这个阶段，React会比较当前的依赖数组和上一次渲染时存储的依赖数组。

当一个组件首次渲染到页面上时，React 会执行组件函数，包括其中的 useEffect 回调函数。这个回调函数中包含了需要执行的副作用操作。此时，React 不会等待副作用操作完成，而是将其加入一个队列中，以便稍后执行。：当组件从页面中卸载时（如路由切换或组件不再需要渲染），React 会执行清理函数（如果存在），以确保释放副作用操作可能持有的资源，从而避免内存泄漏。第一个参数是一个回调函数，该函数包含副作用操作的代码, 可以可选地返回一个清理函数，用于在组件卸载或下一次副作用触发前执行清理操作。

对于复杂的状态逻辑，useState 可能会导致组件内部状态的复杂化，使组件变得难以维护。： 对于大型应用程序中的复杂全局状态管理，useState 可能不足以胜任，你可能需要引入更强大的全局状态管理库，如 Redux 或 Mobx。： 随着 React 不断演进，函数式组件和 Hook 的使用将更加广泛，而 useState 是其中的核心之一，因此它将继续得到支持和改进。： 你可以在同一个函数式组件中多次使用 useState，创建多个独立的状态变量，而不需要使用类组件中的 this.state。

每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。：通常比类组件性能更好，因为函数组件不需要创建类的实例，从而减少了内存和性能开销。： 通常更简洁，适合用于无状态、纯UI渲染的情况，代码更易于理解和维护。前端开发工程师（初、中、高级）、应届、转行、培训、自学等同学。后，可以使用useEffect来模拟生命周期行为，如。： 需要创建类的实例，可能会导致轻微的性能损失。： 可能会显得冗长，因为需要定义类、构造函数和。方法，但在复杂的场景中提供了更多的结构。： 使用函数来定义，接收。

路由懒加载（Route Lazy Loading）是一种前端优化技术，它允许在需要时才加载特定页面的代码和资源，以减少初始页面加载时间。路由预加载是一种优化技术，它允许在用户访问特定页面之前预先加载该页面所需的资源，以提升页面切换时的加载速度。总之，路由预加载是一种优化技术，允许在用户访问特定页面之前预先加载页面所需的资源，以提升页面切换的加载速度和用户体验。总的来说，路由懒加载是一种优化技术，允许在需要时才加载页面的代码和资源，以提高初始加载速度。在懒加载的组件加载完成之前，可以使用。

前端路由通过监听 URL 的变化，根据不同的路径渲染不同的视图组件，实现页面的无刷新切换。在当前路由复用时（例如，同一个组件在不同路由间切换）调用，例如在参数变化时。路由守卫是一些钩子函数，用于在页面导航发生时执行特定的操作，例如验证用户权限、重定向、取消导航等。总之，路由参数和查询参数都是用于在不同页面之间传递数据的方式。不同页面间可以使用相同的路径，通过不同的查询参数来实现不同的功能。路由表由一个个路由配置对象组成，在一个复杂的应用中，路由表可以更加详细，包括嵌套路由、动态路由参数、路由重定向等。

XSS攻击通常在用户与一个被攻击的网站进行交互时发生，攻击者利用网站未充分过滤或验证用户输入的漏洞，将恶意脚本嵌入到网页中，然后让受害者浏览器执行这些脚本。反射型XSS攻击是一种将恶意脚本作为参数注入到URL中，然后通过诱使用户点击恶意链接，使恶意脚本在受害者浏览器中执行的攻击。对于来自URL参数的输入数据，进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。： 攻击者将恶意脚本存储在网站服务器上，当其他用户访问包含这些恶意脚本的页面时，恶意脚本从服务器加载并在受害者浏览器中执行。

在重新打开页面时，浏览器会尝试使用缓存的资源来加速页面加载，因此可能会看到之前加载过的资源。这意味着当网页更新时，浏览器可能仍然加载之前缓存的旧版本资源，导致看到的是旧的页面内容。在资源（如样式表、脚本或图像）的URL中添加一个不同的参数（版本号或时间戳），这会让浏览器认为链接是一个新的资源，从而强制重新下载。在HTML文档的部分中，你可以添加一个meta标签来控制浏览器的缓存行为，这些meta标签的组合会告诉浏览器不要缓存页面内容。浏览器会在本地存储缓存的资源，即使服务器上的资源已经更新。

周末的时候突发奇想就想写个小游戏,想到大学那会cv了网上的贪吃蛇案例,这次不如自己动手写个试试。由于本菜鸟对 canvas 比较好奇，索性就用canvas写个贪吃蛇小游戏练练手。好了，废话不多讲直接开搞！#### 设计思路1.先画个500*500的绿色背景，游戏开始时在预先设定好的位置生成我的小蛇并随机生成食物。2.给蛇一个初始速度（10px/0.5s）和运动方向(left),按上下左右键时改变当前蛇的运动方向3.蛇每移动一步都应该重新绘制蛇，（我呢偷懒了直接重绘了整个地图里的内容，蛇身.

####1.ejs配置#####方法1-修改app.js```js//viewenginesetupapp.set('views',path.join(__dirname,'views'));app.set('viewengine','ejs');````-在views中创建ejs模板文件#####方法2-修改app.js````jsvarejs=require("ejs")app.engine(".html...

需求展示：学习内容：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、 技术笔记 2 遍2、CSDN 技术博客 3 篇3、 学习的 vlog 视频 1 个...

转载：http://caibaojian.com/hide-scrollbar.html隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。 演示 下面给一个简化版的代码

导入字体文件，以pingfang.ttf为例设置font.css@charset "UTF-8";@font-face { font-family: "pinfang"; src: url("font/pinfang.ttf") format("truetype");}在全局使用public.css： @import ‘font.css’;main.js : import ‘@/assets/css/public.css’...

项目场景：项目场景：h5移动端开发问题描述：登录页面在输入账密的时候，软键盘弹起的时候带出了白块在收起软键盘之前不会消失 原因分析：在页面中使用了相对定位/绝对定位属性以及margin属性，导致软键盘弹起时页面内容长度增加但不会自动收回。解决方案：最直接办法不使用上述说的属性；第二种直接在最外层盒子加position:fixed。...

vscode缩进和Eslint缩进问题解决vscode更改换行时的缩进：如果更改失效：取消该属性勾选Eslint 缩进校验修改：

filter、find总结下filter、find等数组方法的使用一、filter数组的方法，用来过滤出符合条件的数据，并存入数组;filer 方法的参数方法里，我们可以加入正则的校验；筛选符合特定条件的数据适用情形：筛选出符合条件的对象筛选出符合条件的数字筛选出符合条件的字符串代码如下（示例）：我列举了筛选对象的示例代码；数字，字符串的筛选大同小异let arra = [ {age: 10, name: 'ywc'}, {age: 20, name: 'fff'}

国际标准时间转为指定格式：根据项目的需求，将国际标准时间转成“YYYY-MM-DD”或“YYYY/MM/DD”功能代码：// 间隔符号 - 或 / 根据个人需求而定function formatDate(tt) { let date = new Date(tt); let y = date.getFullYear(); let M = date.getMonth() + 1; let d = date.getDate(); let theDay = `${y.

问题描述：在调用elementUi中的select下拉框组件时，我想传递自定义参数来供我实现项目中的逻辑，解决方案：1.@change=“setCityAndCounty($event, ‘province’’)” // $event 是默认传的参数（选中的数据），province是自定义参数@change="setCityAndCounty($event, 'province'')"2.@change="(value) => setCityAndCounty(value,‘provi