- 博客(394)
- 收藏
- 关注
原创 useRef、useForwardRef 和 useImperativeHandle
Hook主要用途是否与子组件通信暴露内容useRef存储 DOM 节点或可变值,不触发渲染否整个 ref 对象或 DOM 节点forwardRef将父组件的 ref 传递到子组件内部的 DOM 节点是完整的 DOM 节点与forwardRef配合,自定义暴露给父组件的内容(如特定方法)是自定义的方法或属性。
2025-05-29 19:35:13
1011
原创 watchEffect
通过自动依赖追踪内置清理机制和立即执行特性,大幅简化了复杂异步逻辑的管理。对于需要响应多个状态变化的场景,或需要自动清理副作用的异步操作(如网络请求、定时器),是更优选择。而传统的watch则在需要精确控制监听源和监听深度时更具优势。
2025-05-26 19:23:58
354
原创 83:1 error Replace `······` with `↹↹↹` prettier/prettier 84:1 error Replace `······` w
推荐你先运行自动修复命令,把现有的格式问题解决掉。之后,配置好 Prettier 和编辑器,并且启用保存时自动格式化的功能,这样能有效防止新的格式问题出现。要是你对缩进方式有特殊要求,比如习惯用制表符,那就调整相应的配置项。
2025-05-26 09:29:15
136
原创 redux和react-redux
Redux:负责提供工具来创建 store(如),以及定义如何根据不同的 actions 更新应用的状态(reducers)。在这个例子中,我们通过来处理INCREMENT和DECREMENTactions。:提供了Provider组件,使得 Redux store 可以被 React 应用中的所有层级访问。此外,它还提供了和hooks,简化了 React 组件与 Redux store 之间的交互。在上述代码示例中,我们使用这些 hooks 来读取和修改 Redux store 中的状态。
2025-05-23 10:59:13
230
原创 react-redux
它用于将 Redux 的 store 提供给整个 React 应用。一般在应用的根组件处使用,这样应用内的所有组件都可以访问到 store。这是一个 React Hook,用于从 Redux store 中选择并获取数据。在函数式组件里使用它可以获取 store 中的状态。中是非常常用的,能帮助你更好地将 React 组件和 Redux 状态管理结合起来。函数把 React 组件和 Redux store 连接起来。这也是一个 React Hook,用于获取 Redux store 的。
2025-05-08 13:25:12
453
原创 XSS ..
跨站脚本攻击(XSS)主要是攻击者通过注入恶意脚本到网页中,当用户访问该页面时,恶意脚本会在用户的浏览器中执行,从而可能导致数据被篡改、用户信息泄露等问题。
2025-05-06 14:39:41
630
原创 next中的server comonent中如何共享session
如果你想使用传统的会话管理方式,可以结合和自定义 API 路由来实现。}));res.send('会话数据已设置');});res.send(`用户名: ${username}`);} else {res.send('未找到会话数据');});res.status(500).end('服务器出错');});在 Next.js 的服务器组件中共享会话,可根据具体需求选择合适的方法。next-auth适用于需要身份验证和会话管理的场景;而。
2025-05-06 14:28:09
451
原创 nginx
有两个服务,从A到B,由A发启请求到B,A会带上Authorization的请求头,和B服务所允许的请求头所冲突。本地示例,使用nginx(windows):修改nginx-1.26.2\conf\nginx.conf。下面的代码会把请求localhost:8089的转发到localhost8081,并把请求头字段去掉。下面的配置会把到23.88.32.89:8080的请求转发到21.48.33.10:8088。然后改容器里的配置etc\nginx\nginx.conf。docker版本的,先打个镜像包。
2025-05-01 14:22:58
375
原创 内网环境中安装 Python 项目运行所需的依赖
这些方法可以帮助你在内网环境中顺利安装 Python 项目所需的依赖。选择哪种方法取决于具体的网络环境和项目需求。这会在本地的 8080 端口启动一个 PyPI 镜像服务器。替换为实际的镜像服务器 IP 地址。此命令会将所有依赖包下载到指定的。选项表示不使用 PyPI 索引,选项指定本地包的搜索路径。<镜像服务器 IP>
2025-03-14 14:06:33
416
原创 plugin, loader
stylelint-webpack-plugin:在构建过程中使用Stylelint 进行 CSS/SCSS 代码检查。mini-css-extract-plugin:提取 CSS 代码到单独的文件,而不是内联到JavaScript代码中。css-loader:解析 CSS 文件,处理CSS 中的依赖关系,并将 CSS 转换为 JS 模块。optimize-css-assets-webpack-plugin:压缩 CSS 代码。ts-loader:将TypeScript代码转换为JavaScript代码。
2025-03-12 01:24:16
171
原创 React 性能优化
4.使用虚拟化:对于大型列表或表格等组件,可以使用虚拟化技术(如react-window 或 reactvirtualized)来仅渲染可见区域内的元素,从而提高性能。这对于纯函数组件和大型组件特别有用。避免不必要的渲染:在函数组件中,可以使用 useCallback和 useMemo来避免不必要的函数创建和计算,使用 useRef 保持函数应用的唯一性。8.使用 React.StrictMode:在开发环境中,可以使用 React.StrictMode 组件来检测潜在的问题和不安全的使用。
2025-03-11 22:44:01
517
原创 Reconciler, Commit
在 React 的渲染流程中,Reconciler(协调器)阶段和 Commit(提交)阶段是两个关键的步骤,下面为你详细介绍这两个阶段的具体工作内容。
2025-03-10 09:44:43
694
原创 next学习笔记
npm run dev 运行, npm run build打包 打包后会生成.next文件夹,npx create-next-app@latest创建一个next项目。npm start会本地运行打包后的包。
2025-03-09 15:32:51
258
原创 watch和computed
watch :是一个对象,键是要监听的数据属性名,值是对应的回调函数,也可以是包含 handler 、 deep 、 immediate 等选项的对象。- computed :是一个对象,键是计算属性的名称,值是一个函数,该函数返回计算后的值,也可以使用 get 和 set 方法来定义可读写的计算属性。- watch :用于观察特定数据的变化,并在数据变化时执行相应的回调函数,常用于在数据变化时进行异步操作、复杂的业务逻辑处理或执行副作用。
2025-03-03 15:36:06
210
原创 在 Vue 中使用 keep-alive 组件包裹动态组件时,部分生命周期钩子函数的执行情况会发生变化。keep-alive 是一个抽象组件,它可以缓存包裹的组件实例,避免重复创建和销毁,从而提高性能
生命周期钩子来处理组件的激活和停用状态。生命周期钩子不会触发,同时新增了。
2025-02-28 11:31:28
215
原创 vue组件之间通讯方式(面试概率极大)vueX pinia provide inject有点像react中的useContext
methods: {</script>-- 父组件 --><template><div></div><script>},data() {return {},methods: {
2025-02-25 11:28:11
253
原创 at()函数
最常用的arr.at(-1)得到数组的最后一个值,和pop()的区别是会改变原数组不会得到数组的第一个值,和shift()的区别是会改变原数组不会。
2025-02-21 11:44:47
222
原创 性能优化(面试必问)
中高级前端工程师必备14种性能优化方案马上又是金三银四了,又要面对头疼的面试题了。经常容易被问到性能优化相关的问题,没准 - 掘金https://juejin.cn/post/7188894691356573754
2025-02-21 10:17:25
314
原创 unknow和any的区别
any类型会完全绕过 TypeScript 的类型检查,提供最大的灵活性,但会牺牲类型安全性,容易引入运行时错误。unknown类型在保证灵活性的同时,强调了类型安全。它要求开发者在使用值之前先进行类型检查或类型断言,有助于减少潜在的运行时错误。因此,在大多数情况下,推荐优先使用unknown类型而不是any类型。
2025-02-21 09:29:11
408
原创 React.memo
memo接受两个参数,一个是需要缓存的组件,第二个是函数(必须是函数,不能直接写ture(缓存)、false(不缓存),即使函数的返回值是boolean)
2025-02-20 11:41:26
177
原创 windows中使用docker
从你给出的错误信息可知,在部署 WSL2 发行版时碰到问题,具体是当前计算机配置不支持 WSL2,这通常是由于未启用 “虚拟机平台” 可选组件或者在 BIOS 里未开启虚拟化功能所导致的。
2025-02-10 16:48:54
2385
原创 解构赋值学习
首先展开对象的所有属性,然后再添加或覆盖labelList属性。这意味着先将里的所有属性都放入新对象,接着把labelList转换为字符串后的结果赋值给新对象的labelList属性。先添加或设置labelList属性为转换后的字符串,然后再展开对象的所有属性。这可能会导致如果中原本就有labelList属性,那么展开时会覆盖之前设置的labelList属性值。
2025-02-08 09:41:15
492
原创 Webpack 和 Vite 的区别
综上所述,Webpack 和 Vite 各有优缺点,开发者可以根据项目的具体需求和规模来选择合适的构建工具。
2025-02-07 21:03:17
912
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人