liyuxiaomeng的博客

原创 react中的useDebounceEffect用法

是 ahooks 库提供的一个自定义 hook，它是 useEffect 的防抖版本。当依赖项频繁变化时，它可以控制 effect 函数的执行频率，避免过于频繁的执行。

原创 React-Redux 中的useDispatch 用法

如果我们不在登录成功后主动将用户信息存入 Redux，那么在跳转后，username 会是空的，导致 useLoadUserData 钩子发起 AJAX 请求去获取用户信息。通过使用 useDispatch 主动 dispatch 用户信息，我们确保了在跳转后，Redux store 中已经有正确的用户信息，避免了额外的网络请求和潜在的时序问题。：通过 useDispatch 获取 dispatch 函数，然后用它来 dispatch actions，更新 Redux store 中的状态。

原创 react中useEffect的用法，以及订阅模式的原理

退出登录的功能示例用法说明这个useEffect是用来监听用户登出状态并执行相应跳转的核心逻辑。

原创 react中todolist小案例

【代码】react中todolist小案例。

原创 react中的使用useReducer和Context实现todolist

• dispatch：派发动作的函数，格式：dispatch({ type: '动作名', payload: 附加数据 })；• handleSubmit：校验内容 → 构建新 Todo → 调用 dispatch 派发 add 动作 → 清空输入；• Provider：把 state（当前 Todo 列表）和 dispatch（触发状态更新的函数）暴露给所有子组件。• useContext(TodoContext)：从上下文获取全局的 dispatch，触发状态更新。

原创 react中useReducer的使用

1. 类型定义：清晰标注StateType和ActionType的作用，约束状态和动作的结构，体现 TypeScript 的类型安全特性。3. useReducer 使用：解释 Hook 的参数和返回值，明确state（当前状态）和dispatch（动作派发函数）的含义。4. UI 交互：标注按钮点击事件中dispatch的作用，说明如何通过派发不同类型的动作触发状态更新。2. Reducer 函数：重点说明纯函数特性、不可变数据原则，以及每个 case 分支的作用。

原创 React Hooks 库中的处理防抖的useDebounceFn的用法

【代码】React Hooks 库中的处理防抖的useDebounceFn的用法。

原创 React中的受控组件示例

【代码】React中的受控组件示例。

原创 react的组件库antd design表格多选，删除的基础示例

这个组件是一个非常标准的 CRUD (增删改查) 中 "删" 的实现范例。它正确地处理了父子组件（或元素与逻辑）之间的通信，并且考虑了状态同步（删除已选项时的处理）和用户提示（确认弹窗），代码结构清晰且健壮。它绑定了 selectedRowKeys 和 onSelectChange，实现了“勾选更新状态，状态更新视图”的闭环。Ant Design 的表格是受控组件，必须通过这个 state 来控制复选框的勾选状态。关键点：如果删除的是已选中的行，同步更新 selectedRowKeys，防止状态残留。

原创 React中的 css in js的使用示例

【代码】React中的 css in js的使用示例。

原创 React中使用classnames的案例

在 onChange 事件中，为了简化示例，代码使用了 as any。在生产环境中，建议通过定义更精确的类型或使用受控组件的泛型来避免这种类型断言。对象： classNames({ 'foo': true, 'bar': false }) => 'foo'数组： classNames(['foo', 'bar']) => 'foo bar'字符串： classNames('foo', 'bar') => 'foo bar'混合： 你可以像代码中那样把它们混合在一起使用。为什么要用 classNames？

原创 React中的 闭包陷阱

【代码】React中的 闭包陷阱。

原创 react中使用自定义hook异步加载数据

【代码】react中使用自定义hook异步加载数据。

原创 react中 hook的基本使用案例，获取鼠标的位置

【代码】react中 hook的基本使用案例，获取鼠标的位置。

原创 React中immer的使用

react中Immer 的核心是让你用“可变”的写法去修改。状态，它会自动帮你生成不可变更新所需的。，从而避免直接修改原状态。

原创 react中state不可变量数据更新原则

【代码】react中state不可变量数据。

原创 React中的state不可变数据

【代码】React中的state不可变数据。

原创 TS中的泛型

【代码】TS中的泛型。

原创 css中flex-grow的用法

是 CSS Flexbox 布局中的一个属性，用于控制 flex 项目在主轴上的增长能力。它决定了 flex 容器中剩余空间如何分配给 flex 项目。，表示如果存在剩余空间也不放大。

原创 uniapp官方推荐的设置全局背景颜色的方式

这样就能实现 真正的全屏灰色背景，无论内容多少，滚动与否，背景都一致。✅ 这是 UniApp 官方推荐的页面背景设置方式。

原创 React中的setParams的用法

【代码】React中的setParams的用法。

原创 React中获取查询参数useSearchParams

【代码】React中获取查询参数useSearchParams。

原创 React中使用useParams

【代码】React中使用useParams。

原创 React中的useContext，createContext的使用

【代码】React中的useContext，createContext的使用。

原创 React中的useRef的用法

基本用法组件挂载后，inputRef.current 会自动指向对应的 DOM 元素。注意：在组件首次渲染时，ref 尚未关联 DOM，current 为初始值（如 null），因此若需操作 DOM，通常配合 useEffect（确保 DOM 已挂载）。

原创 react中的useEffect使用方法

是一个 React Hook，可让您将。

原创 React中的componentWillUnmount 使用

【代码】React中的componentWillUnmount 使用。

原创 使用husky+ commitlint检查提交描述是否符合规范要求

6. 添加 commitlint 的 hook 到`husky`中，并指令在commit-msg 的 hooks 下执行 npx --no-install commitlint --edit"$1”指令。3.在 package.json 中生成`prepare'指令(需要npm>7.0版本)**注意:确保保存为`UTF-8`的编码格式*，否则可能会出现错误！注意:npm 需要在7.x 以上版本!之前，校验你提交的内容是否符合你本地配置的。那么这一小节，我们就需要处理这两个问题。可以让你当前的代码检查。

原创 使用 Commitizen 辅助git规范化提交

第六步：先拉取远程的代码git pull origin master ，再提交新的代码。第五步：使用 git cz 代替 git commit。第二步：项目中安装插件。

原创 调整为 dart-sass 支持的语法，将深度选择器/deep/调整为::v-deep

解决方法：将/deep/改为::v-deep。

原创 uniapp中的 nvue开发注意点

原创 微信小程序的明文scheme拉起此小程序配置作用是什么

在外部（如短信、浏览器、H5 页面、App 等）直接打开指定的小程序页。

原创 uniapp中对接开发激励广告视频

提示：在正式开始之前，一定要多去看看官方文档，看看他们的写法和api的用法， 不要直接上手就去写，很浪费时间，而且用法不对，还会一直报错！我开发的app激励视频广告使用的是api的方式生成激励视频。

原创 可选链（Optional Chaining）?. 和 空值合并运算符（Nullish Coalescing Operator）??

一、 可选链 (Optional Chaining) 1. 它解决了什么问题？在访问嵌套对象的属性时，我们经常会遇到一个经典的错误： 或 。例如，我们想访问 ，但如果 是 ，那么 就会立刻报错。为了避免这种错误，我们以前不得不这样写：这种层层的 判断非常繁琐。可选链 允许你安全地访问嵌套对象的属性，而无需检查每个层级是否存在。它的工作原理很简单：在你的代码 中：我们经常使用 来为变量提供一个默认值。但 有一个问题：它会把所有假值 (falsy values) 都视为

原创 uniapp中全局封装一个跨组件的复制粘贴方法

【代码】uniapp中全局封装一个跨组件的复制粘贴方法。

原创 uniapp中封装底部跳转方法

这里的arr是一个 “Tab 页面路径数组”，本质是Tab 页的白名单。项目中配置在pages.json的tabBar中的页面（即底部导航栏对应的页面，如 “首页”“我的”），必须通过跳转，不能用普通跳转 API，因此需要先定义这些页面的路径，用于后续判断。示例中（首页）、（我的）就是典型的 Tab 页路径。

原创 码云SSH 公钥认证失败要怎么处理

登录 Gitee 账户，进入「设置」→「SSH 公钥」，粘贴公钥内容并保存。（公钥），说明已生成；一路按回车默认配置即可。提示，说明配置成功。

原创 在ant-design-vue中使用 模版的颜色动态随机生成颜色

color.Js文件。

原创 Vue2 的 PC 管理后台中，是否需要将 px 转为 rem 格式

— 当用户调整浏览器字体大小或在不同分辨率屏幕上浏览时，页面元素会按比例缩放，保持布局一致性。rem 是相对单位，基于根元素（html）的字体大小计算，核心优势是。对于 Vue2 PC 管理后台，配置 postcss（在。

原创 gitee远程仓库对修改文件大小写不敏感，只修改文件名，远程仓库不更新的问题处理

【代码】gitee远程仓库对修改文件大小写不敏感，只修改文件名，远程仓库不更新的问题处理。