随笔分类 -  react

摘要:一、什么是 Redux Thunk? 在 React 应用中,Redux 是一个常用的状态管理工具。但 Redux 本身是一个纯同步状态管理工具,它的 dispatch 方法默认只支持同步操作。如果我们想要处理异步逻辑(如请求接口、延时操作等),需要使用中间件(middleware)。Redux T 阅读全文
posted @ 2024-12-19 11:11 行走的蒲公英 阅读(236) 评论(0) 推荐(0) 编辑
摘要:1. 什么是 React 合成事件? React 使用 SyntheticEvent 对原生事件进行封装,使得所有事件在不同浏览器中都具有相同的行为。这种封装提供了一致性和性能优化,开发者可以像使用原生事件一样使用 React 合成事件。 2. React 合成事件的特性 1. 跨浏览器兼容性 Re 阅读全文
posted @ 2024-12-18 11:25 行走的蒲公英 阅读(42) 评论(0) 推荐(0) 编辑
摘要:setState 是 React 类组件中用于更新组件状态的方法。根据执行的上下文环境,setState 的行为可能会表现出异步或同步的特性。具体区别如下: 1. 为什么 React setState 是异步的? React 的 setState 并不会立刻更新 state 和重新渲染组件,而是批量 阅读全文
posted @ 2024-12-18 11:13 行走的蒲公英 阅读(38) 评论(0) 推荐(0) 编辑
摘要:如何写好代码其实是一个很大的话题,本次仅分享一些自己的经验之谈,有其他idea的欢迎交流 在我看来,写好代码更多的是逻辑思维的体现,而这,紧靠一两次分享是无法提高的,我只能尽可能的将可能可以复制的经验进行分享 本次分享不会涉及太多你使用的框架的具体使用细节,技术选型总是千变万化的,我们需要的是抓住不 阅读全文
posted @ 2023-04-07 15:42 行走的蒲公英 阅读(84) 评论(0) 推荐(1) 编辑
摘要:使用到ahooks里面的 useFullscreen, https://ahooks.js.org/zh-CN/hooks/use-fullscreen/#usefullscreen-demo2 直接上代码了 import { useFullscreen } from 'ahooks'; impor 阅读全文
posted @ 2023-04-07 14:58 行走的蒲公英 阅读(38) 评论(0) 推荐(0) 编辑
摘要:支持表单受控和非受控使用,基于antd upload 进行的二次封装, 使用场景如下图: 1.组件文件夹 2. index.tsx贴代码 import React, { useEffect, useMemo, useState } from 'react'; import { ImageFilesW 阅读全文
posted @ 2023-02-27 14:48 行走的蒲公英 阅读(827) 评论(0) 推荐(0) 编辑
摘要:记录一下: 根据后台接口返回的文件流,前端实现导出下载,使用(react+ts) 1.请求方法 (这里写法绕开拦截器) // 导出日志 export async function exportLog(data: ILogparams) { const url = getRequestUrl(API. 阅读全文
posted @ 2023-02-20 09:56 行走的蒲公英 阅读(495) 评论(0) 推荐(0) 编辑
摘要:一、key的作用: 1. 主要是对DOM渲染的性能优化,用来减少没必要的diff算法对比。当列表顺序发生改变时,如果不加key,不管数据是否发生改变,所有列表元素都会重新渲染,当列表元素没有发生改变时,值是在末尾产生新的元素,此时key的值加不加都是可以的,React只会渲染最后一个元素。如图: 假 阅读全文
posted @ 2023-02-02 11:26 行走的蒲公英 阅读(626) 评论(0) 推荐(0) 编辑
摘要:问题1.多次触发请求,且存在潜在的竞态问题 const [page, setPage] = useState(1); const [keyword, setKeyword] = useState(''); useEffect(() => { // do request }, [page, keywo 阅读全文
posted @ 2023-02-02 11:06 行走的蒲公英 阅读(68) 评论(0) 推荐(0) 编辑
摘要:基于移动端需要扫码签名的功能,这里记录一下。 1、使用 react-signature-canvas 插件,npm i react-signature-canvas --save 2、此功能签名后生成的图片是base64格式,如需其他格式,可参考文档修改 3、封装的组件代码 import { Sig 阅读全文
posted @ 2022-08-03 11:22 行走的蒲公英 阅读(1540) 评论(0) 推荐(0) 编辑
摘要:先说明下需求:-UI设计如图(需要实现的效果):可拖动滑块,对应百分比,以及对应css宽度。 实现步骤: 第一步:npm下载安装react-slider: npm install --save rc-slider 第二步:组件页面引入: import Slider, { Range } from " 阅读全文
posted @ 2021-09-07 15:44 行走的蒲公英 阅读(1591) 评论(0) 推荐(0) 编辑
摘要:说明:现有一个小需求,切换全局社区id,页面全部数据都相应切换。选择其中一种实现方式就是使用useContext和useReducer配合管理这个公共数据id。 以下是大概步骤: 1. 新建GolobalID.tsx文件,贴代码: import { createContext, useReducer 阅读全文
posted @ 2021-08-27 11:23 行走的蒲公英 阅读(209) 评论(0) 推荐(0) 编辑
摘要:说明:使用antd组件走马灯,附上api链接:https://react-slick.neostack.com/docs/example/pause-on-hover 1. 第一步:下载安装: npm install react-slick --save npm install slick-caro 阅读全文
posted @ 2021-08-17 14:52 行走的蒲公英 阅读(1397) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示