joken1310 - 博客园

如何在React 18中优化大型组件的性能？

摘要：在React 18中优化大型组件的性能可以通过多种策略和最佳实践来实现。以下是一些具体的建议： 1. 使用React.memo进行优化对于那些渲染代价较高且不经常更新的组件，可以使用React.memo来包裹它们。这样，当父组件重新渲染时，如果传递给这些子组件的props没有改变，React将跳过阅读全文

posted @ 2025-05-12 21:33 joken1310 阅读(111) 评论(0) 推荐(0)

如何在项目中有效利用React 18的新功能

摘要：要在项目中有效利用React 18的新功能，可以从以下几个方面入手： 1. 升级到React 18 首先，确保项目已升级到React 18版本。升级过程中，注意解决可能出现的兼容性问题，并参考官方文档进行必要的代码调整。 2. 使用新的渲染API 替换ReactDOM.render()为create 阅读全文

posted @ 2025-05-08 22:31 joken1310 阅读(93) 评论(0) 推荐(0)

React 18中关于Hooks的经典面试题

摘要：以下是一些React 18中关于Hooks的经典面试题：基础理解类 React Hooks的设计动机是什么？解决类组件的“嵌套地狱”问题，使组件逻辑更清晰。使状态逻辑更易于复用和组合，通过自定义Hook实现逻辑提取。降低学习成本，无需理解复杂的class语法和this绑定。使用Hooks时阅读全文

posted @ 2025-05-08 22:26 joken1310 阅读(695) 评论(0) 推荐(0)

react18 useReducer 可以不同组件共享数据吗

摘要：是的，useReducer 可以实现不同组件之间的数据共享。通常，我们会结合 React.createContext 和 useContext 钩子来实现这一功能。以下是具体步骤： 1. 创建上下文在项目的共享模块中，使用 React.createContext 创建一个上下文对象： import 阅读全文

posted @ 2025-05-08 22:18 joken1310 阅读(65) 评论(0) 推荐(0)

react18 slot写法

摘要：在React 18中，实现插槽（slots）的功能主要有以下两种方式： 1. 使用 props.children 子组件（MyComponent.js） import React from 'react'; function MyComponent(props) { return ( <div> < 阅读全文

posted @ 2025-05-08 21:41 joken1310 阅读(224) 评论(0) 推荐(0)

el-image-viewer图片预览使用

摘要： el-image-viewer 是 Element UI 提供的图片查看器组件，用于放大查看图片，支持缩放、拖拽、多图浏览等。以下是使用方法：安装 Element UI 若未安装 Element UI，使用以下命令安装： # 使用 npm npm install element-ui --save 阅读全文

posted @ 2025-05-08 21:36 joken1310 阅读(1926) 评论(0) 推荐(0)

Vue3 中 v-html 的安全性控制 dompurify库使用

摘要： Vue3 中 v-html 的安全性控制在 Vue3 中使用 v-html 指令时需要特别注意安全性问题，因为它会直接将 HTML 内容渲染到 DOM 中，可能导致 XSS（跨站脚本攻击）漏洞。安全性风险 v-html 的主要风险是：可能执行恶意脚本可能加载外部资源可能修改 DOM 结构阅读全文

posted @ 2025-05-07 21:40 joken1310 阅读(1118) 评论(0) 推荐(0)

vscode 通义千问插件不同上下文标签代表的含义

摘要： vscode通义千问上下文标签代表的含义 #file: 当前文件相关操作。 #image: 图像处理或显示。 #teamDocs: 团队文档管理（仅企业版支持）。 #codeChanges: 代码变更历史。 #gitCommit: Git提交记录。 #codebase: 整个代码库的操作。总结: 阅读全文

posted @ 2025-04-16 21:06 joken1310 阅读(528) 评论(0) 推荐(0)

golang curd示例项目目录结构

摘要：下面是一个使用 Go 语言和 Gin 框架实现的简单 CRUD（创建、读取、更新、删除）项目的目录结构和示例代码。假设我们有一个简单的用户管理系统。目录结构 user-crud/ ├── .gitignore ├── go.mod ├── go.sum ├── main.go ├── intern 阅读全文

posted @ 2025-04-15 20:32 joken1310 阅读(120) 评论(0) 推荐(0)

如何使用qt开发跨平台桌面软件

摘要：使用 Qt 开发跨平台桌面软件是一个高效且强大的选择，因为 Qt 提供了丰富的工具和库，支持在 Windows、macOS、Linux 等多个平台上运行。以下是使用 Qt 开发跨平台桌面软件的基本步骤： 1. 安装 Qt 开发环境下载 Qt：访问 Qt 官方网站下载 Qt 安装程序。选择组件：阅读全文

posted @ 2025-04-14 21:22 joken1310 阅读(813) 评论(0) 推荐(0)

vue3 props 和 attrs的区别

摘要：在 Vue 3 中，props 和 attrs 是两个不同的概念，它们的主要区别在于用途和行为。以下是它们的详细区别： 1. props 定义：props 是组件的自定义属性，用于从父组件向子组件传递数据。特点： props 是响应式的，父组件传递的数据变化会自动更新子组件中的 props。 pr 阅读全文

posted @ 2025-04-14 21:15 joken1310 阅读(433) 评论(0) 推荐(1)

Qt 是一个使用 C++ 编写的跨平台开发框架

摘要： Qt 是一个使用 C++ 编写的跨平台开发框架。它主要用于开发跨平台的桌面应用程序、嵌入式系统应用、移动应用以及多媒体和网络应用。Qt 提供了一套丰富的类库和工具，使开发者能够利用 C++ 语言高效地构建功能丰富、性能优越且能够在多个操作系统和硬件平台上运行的应用程序。 1. Qt 的核心特性 1 阅读全文

posted @ 2025-04-14 21:10 joken1310 阅读(684) 评论(0) 推荐(0)

QWebChannel 实现window软件和web网页的通信

摘要： QWebChannel 是 Qt 提供的一种机制，用于在 Qt 应用程序和 Web 页面（JavaScript）之间进行双向通信。它基于 Qt WebEngine 或 Qt WebKit，允许将 Qt 对象暴露给 JavaScript，并允许 JavaScript 调用这些对象的方法或访问其属性，同阅读全文

posted @ 2025-04-14 20:57 joken1310 阅读(795) 评论(0) 推荐(0)

react native `AsyncStorage` 键值对存储系统使用

摘要： AsyncStorage 是 React Native 提供的一个简单的、异步的键值对存储系统，用于在设备上持久化存储数据。它类似于浏览器中的 localStorage，但它是异步的，并且适用于移动应用环境。以下是 AsyncStorage 的基本使用方法，包括安装、常用操作示例以及一些注意事项。阅读全文

posted @ 2025-04-01 21:12 joken1310 阅读(430) 评论(0) 推荐(0)

react native 如何实现页面路由

摘要：页面tab路由、普通路由跳转在 React Native 中，实现 Tab 路由和普通页面跳转通常需要使用导航库。最常用的导航库是 @react-navigation/native，它提供了多种导航方式，包括 Tab 导航和 Stack 导航。下面是如何使用 @react-navigation/ 阅读全文

posted @ 2025-04-01 21:09 joken1310 阅读(266) 评论(0) 推荐(0)

Realm 跨平台nosql 数据库使用，react native

摘要： Realm 是一个跨平台的移动数据库，专为现代移动应用设计，提供了比传统 SQLite 更高的性能和更简单的 API。Realm 支持 React Native、iOS 和 Android 平台，允许开发者以面向对象的方式操作数据库，而无需编写复杂的 SQL 查询。以下是如何在 React Nat 阅读全文

posted @ 2025-04-01 21:06 joken1310 阅读(438) 评论(0) 推荐(0)

SQLite 如何使用

摘要： SQLite 基本使用 SQLite 是一个轻量级的嵌入式数据库，广泛用于移动应用、桌面应用和小型服务器应用中。以下是如何使用 SQLite 的基本步骤： 1. 安装 SQLite 在大多数操作系统中，SQLite 已经预装。如果没有，可以通过以下方式安装： Windows: 下载 SQLite 预阅读全文

posted @ 2025-04-01 21:02 joken1310 阅读(832) 评论(0) 推荐(0)

react 原子样式写法

摘要： React 中使用原子样式写法原子样式(Atomic CSS)是一种将样式分解为最小可复用单元的CSS编写方法。在React中，你可以通过以下几种方式实现原子样式： 1. 使用Tailwind CSS Tailwind是目前最流行的原子CSS框架之一： import React from 'rea 阅读全文

posted @ 2025-03-27 21:52 joken1310 阅读(102) 评论(0) 推荐(0)

js Reflect 内置对象，用于设置对象属性

摘要： Reflect 是 JavaScript 中的一个内置对象，它提供了一组静态方法，用于执行与对象操作相关的底层功能（如属性访问、函数调用、构造函数调用等）。这些方法与 Object 或 Proxy 的方法类似，但设计更一致且适合与 Proxy 配合使用。以下是 Reflect 的核心用法和常见场景：阅读全文

posted @ 2025-03-27 21:37 joken1310 阅读(114) 评论(0) 推荐(0)

js proxy 使用，拦截对象访问，劫持器

摘要： proxy 有哪些拦截器 JavaScript Proxy 拦截器大全 Proxy 提供了13种拦截器（traps），可以拦截目标对象的几乎所有基本操作。以下是完整的拦截器列表及其用途： 1. 基本操作拦截器 get(target, property, receiver) 拦截属性读取：proxy. 阅读全文

posted @ 2025-03-27 21:32 joken1310 阅读(629) 评论(0) 推荐(0)

react native 如何在安卓虚拟机中调试

摘要：在 Android 模拟器（AVD）中调试 React Native 应用，你可以按照以下步骤操作： 1. 启动 React Native 开发环境确保你已经正确安装了 React Native 开发环境，包括： Node.js React Native CLI（或 npx） Android St 阅读全文

posted @ 2025-03-25 21:59 joken1310 阅读(897) 评论(0) 推荐(0)

ahooks 常用的方法

摘要：常用hooks ahooks 是一个由阿里巴巴团队开发的 React Hooks 库，提供了许多实用的 Hooks 来简化 React 开发。以下是 ahooks 中一些常用的用法和 Hooks： 1. useRequest - 管理异步请求 useRequest 是 ahooks 中最常用的 Ho 阅读全文

posted @ 2025-03-25 21:31 joken1310 阅读(1103) 评论(0) 推荐(0)

react native hooks写法

摘要：在 React Native 中，React Hooks 是一种让函数组件可以使用状态和其他 React 特性的方法。以下是 React Native 中使用 Hooks 的最新写法和示例： 1. 使用 useState Hook useState 用于在函数组件中添加状态： import Reac 阅读全文

posted @ 2025-03-25 21:19 joken1310 阅读(143) 评论(0) 推荐(0)

document.activeElement 获取焦点元素

摘要：焦点元素获取 document.activeElement 是一个只读属性，用于返回当前文档中获得焦点的元素（即活动元素）。它可以帮助开发者获取用户当前正在交互的元素，例如输入框、按钮或其他可聚焦的 HTML 元素。主要作用获取当前聚焦的元素：通过 document.activeElement 阅读全文

posted @ 2025-03-24 21:52 joken1310 阅读(370) 评论(0) 推荐(0)

dojo 获取当前view信息方式

摘要：在 Dojo 中，获取当前 View 的信息通常涉及以下几个方面： View 的定义方式：是否使用 dijit/layout/ContentPane、dijit/layout/BorderContainer 或其他布局组件。 View 的管理方式：是否使用 dojo/router 或自定义的路由管理阅读全文

posted @ 2025-03-24 21:49 joken1310 阅读(21) 评论(0) 推荐(0)

dojo 如何监听tab栏切换

摘要：在 Dojo 中，监听 Tab 栏的切换事件可以通过 dijit/layout/TabContainer 和 dijit/layout/ContentPane 组件实现。TabContainer 提供了 selectChild 事件，可以用于监听 Tab 切换。以下是实现监听 Tab 栏切换的详细阅读全文

posted @ 2025-03-24 21:44 joken1310 阅读(53) 评论(0) 推荐(0)

dojo-build 打包dojo js ，如何使用

摘要： dojo-build 是 Dojo 的构建工具，用于将多个模块打包为一个或多个文件，从而优化加载性能，减少 HTTP 请求。以下是使用 dojo-build 的详细步骤： 1. 安装 Dojo 首先，确保你已经安装了 Dojo。可以通过以下方式获取 Dojo：从 Dojo 官网下载 Dojo 的阅读全文

posted @ 2025-03-24 21:37 joken1310 阅读(72) 评论(0) 推荐(0)

dojo js 项目结构，如何写组件

摘要：项目结构以下是对上面 Dojo 单页应用（SPA）项目的总结，包括项目结构、路由管理、组件写法等关键点。 1. 项目结构一个典型的 Dojo 单页应用项目结构如下： /my-spa ├── index.html // 主 HTML 文件 ├── app.js // 应用入口文件，处理路由和初始化阅读全文

posted @ 2025-03-24 20:52 joken1310 阅读(144) 评论(0) 推荐(0)

threejs 光照类型

摘要： Three.js 提供了多种类型的光源，每种光源模拟现实世界中的不同光照效果。以下是 Three.js 中常用的几种光源类型及其特点： 1. 环境光（AmbientLight）描述：环境光是一种全局光源，它均匀地照亮场景中的所有对象，但不会产生阴影。使用场景：用于为场景提供基础亮度，避免物体看起阅读全文

posted @ 2025-03-06 22:36 joken1310 阅读(147) 评论(0) 推荐(0)

threejs LightProbe类增加材质光照效果

摘要： LightProbe 作用，增加材质光照明亮度细节 LightProbe 是 Three.js 中用于捕捉和模拟场景中的间接光照（Indirect Lighting）的一个重要工具。它通过在场景中放置多个探针来采集环境光信息，并将这些信息应用到场景中的物体上，从而增强渲染的真实感。以下是 Light 阅读全文

posted @ 2025-03-06 22:20 joken1310 阅读(309) 评论(0) 推荐(0)

threejs OrbitControls 控件控制相机旋转、缩放和平移视图

摘要： OrbitControls 是 Three.js 中非常常用的控件库，它允许用户通过鼠标和触摸屏与3D场景进行交互，包括旋转、缩放和平移视图。要使用 OrbitControls，你需要引入相应的模块，并将其附加到你的相机和渲染器上。以下是详细的步骤和示例代码。步骤引入 OrbitControls 阅读全文

posted @ 2025-03-06 21:56 joken1310 阅读(1665) 评论(0) 推荐(0)

threejs 纹理的偏移量、缩小放大控制

摘要：在 Three.js 中，你可以通过调整材质的 map 属性和使用 repeat、offset 等属性来控制纹理的放大缩小以及位置。以下是详细说明如何实现这些功能。 1. 设置纹理的基本属性 Three.js 提供了多种方式来控制纹理的显示效果，包括缩放、平移（偏移）等。以下是一些常用的属性： .r 阅读全文

posted @ 2025-03-05 21:05 joken1310 阅读(494) 评论(0) 推荐(0)

threejs 几何体（Geometry）、材质（Material）和网格（Mesh）之间的关系

摘要：在 Three.js 中，立方体（或任何三维几何体）由多个组件构成，主要包括几何体（Geometry）、材质（Material）和网格（Mesh）。这些组件之间的关系是构建和渲染三维对象的基础。下面详细介绍它们之间的关系以及如何在 Three.js 中使用它们。 1. 几何体 (Geometry) 阅读全文

posted @ 2025-03-05 20:56 joken1310 阅读(311) 评论(0) 推荐(0)

threejs uv坐标的作用

摘要： UV坐标在三维图形学和纹理映射中起着至关重要的作用。它们是将二维纹理图像正确映射到三维模型表面的关键工具。以下是UV坐标的主要作用和重要性： 1. 纹理映射的基础 UV坐标定义了如何将二维纹理图像映射到三维几何体的表面上。每个顶点的UV坐标决定了纹理图像的哪些部分应该出现在该顶点对应的位置上。 U轴阅读全文

posted @ 2025-03-05 20:44 joken1310 阅读(214) 评论(0) 推荐(0)

threejs Vector3 类定义位置

摘要：在Three.js中，THREE.Vector3 是一个非常重要的类，用于表示三维空间中的点或向量。它提供了丰富的功能来操作三维坐标和向量，如平移、旋转、缩放、计算距离、法线等。掌握 Vector3 类的使用对于处理三维图形和动画非常重要。主要用途表示位置：用作物体的位置。表示方向：用作方向向阅读全文

posted @ 2025-03-05 20:22 joken1310 阅读(330) 评论(0) 推荐(0)

threejs 网格线GridHelper

摘要：在Three.js中，GridHelper 是一个非常有用的工具，用于在3D场景中可视化地显示一个网格平面。它可以帮助开发者更好地理解场景中的空间关系和对象的位置。GridHelper 通常用于调试和设计阶段，以提供一种直观的方式来查看坐标系和物体的相对位置。主要用途调试辅助：帮助开发者更直观地阅读全文

posted @ 2025-03-05 20:17 joken1310 阅读(482) 评论(0) 推荐(0)

threejs Group类，统一变换设置一组立方体

摘要：在Three.js中，Group 是一个非常有用的类，它允许你将多个对象组合在一起，并作为一个整体进行操作。这使得管理复杂场景变得更加简单和高效。通过使用 Group，你可以对一组对象执行统一的变换（如平移、旋转、缩放），而无需单独操作每个对象。主要用途组合管理：将多个对象组合在一起，便于管理和阅读全文

posted @ 2025-03-05 20:09 joken1310 阅读(201) 评论(0) 推荐(0)

threejs 官方案例天空盒代码分析

摘要：代码地址 https://github.com/mrdoob/three.js/blob/master/examples/webgl_effects_anaglyph.html 效果 https://threejs.org/examples/#webgl_effects_anaglyph 代码分析阅读全文

posted @ 2025-03-05 20:03 joken1310 阅读(433) 评论(0) 推荐(0)

threejs 如何用键盘上下左右控制几何体mesh移动

摘要：在 Three.js 中，可以通过监听键盘事件（上下左右键）来控制一个 Mesh 的移动。以下是一个完整的示例，展示如何实现通过方向盘（上下左右键）控制一个人的 Mesh 在场景中走动。结论通过监听键盘事件（keydown 和 keyup），记录按键状态，并结合时间差更新 Mesh 的位置，可以阅读全文

posted @ 2025-03-04 22:13 joken1310 阅读(303) 评论(0) 推荐(0)

threejs 动画播放结束如何监听

摘要：在 Three.js 中，动画的播放通常通过 THREE.AnimationMixer 和 THREE.AnimationAction 来管理。如果你想检测动画是否播放结束，可以通过监听 AnimationAction 的事件或检查其状态来实现。结论可以通过 AnimationAction 的阅读全文

posted @ 2025-03-04 22:09 joken1310 阅读(410) 评论(0) 推荐(0)

joken-前端工程师