
React
文章平均质量分 73
React学习应用避坑
小溪彼岸
万里长征,日进一步 , 好记性不如烂笔头
展开
-
【React】自定义hook
React16.8版本引入了Hooks,使得函数组件能够使用状态和其他React特性,React中内置了一些Hook,比如 State和 useEffect。有时我们需要一个用途更特殊的Hook,这时我们就可以根据应用需求创建自己的 Hook。// 组件释放取消事件监听},[]);return ('✅ 在线' : '❌ 离线'}</h3></div>转载 2025-01-05 15:43:32 · 31 阅读 · 0 评论 -
【React】React Redux
上面使用 reducer 的过程无法使用类型约束,如需使用类型约束需要将 RootState。获取counter reducer中的state,引入 dispatch。函数的第一个参数是整个 Redux store actions。(可选的)通常用来利用props变更时更新store中的数据。(可选的)通常用来利用props检索store中的数据。在src/index.tsx中引入创建的store,在。优化后的使用方式有类型提示,使用过程更友好。_可以实现_自动类型推断,减少类型约束。转载 2025-01-05 15:27:08 · 38 阅读 · 0 评论 -
【React】React Router
React Router 是一款适用于React的多策略路由管理库。转载 2024-12-29 14:42:02 · 32 阅读 · 0 评论 -
【React】Fragment和<>的区别
渲染列表时不能使用 <></> ,需要显式表示为 Fragment。代替,它们都允许你在不添加额外节点的情况下将子元素组合。和其他元素一样,可以将 Fragment。并且需要为每个元素分配一个 key。将多个元素组合在一起且不会改变。和其他元素一样可以进行嵌套使用。或简写 <>...</>元素分配给变量,作为。通常使用 <></>使用 Fragment。转载 2024-12-29 14:12:11 · 40 阅读 · 0 评论 -
【React】memo、useMemo与useCallback的区别
使用memo包裹组件,当组件的propsstate和context没有改变时组件不会被重新渲染不执行渲染更新时不会执行子组件代码作用对象为组件并返回一个新组件memo是一个高阶组件使用useMemo包裹计算函数需要返回一个计算结果并会缓存当前函数执行结果,当依赖项没有发生改变时不会执行结算函数不执行渲染更新时会执行子组件代码不会执行renturn代码作用对象为带返回值的计算函数,需要设置依赖项useMemo是一个ReactHook使用。转载 2024-12-29 14:06:17 · 77 阅读 · 0 评论 -
【React】函数组件常见hooks
*** useEffect跳过首次渲染* @param effect 回调* @param dependencies 依赖项,依赖项改变时才执行回调*/// 记录回调函数是否是第一次渲染if (isFirstRender.current) { // 第一次渲染不执行} else { // 第二次及以后执行回调effect();console.log("count dom 改变");console.log("清除count dom副作用");return (<>转载 2024-12-29 13:58:24 · 23 阅读 · 0 评论 -
【React】函数组件
这极大地增强了函数组件的能力,这使得函数组件在 React 开发中愈发流行和广泛使用。当组件被加载后会调用 useEffect 副作用起到组件挂载生命周期的作用。,使得函数组件能够使用状态和其他React特性,如 useState。函数组件本质没有生命周期,但是我们通过hooks来模仿类组件当中的。之前,函数组件主要用于不涉及状态或生命周期的简单UI渲染。函数组件接收外部传参与class组件类似。接受数据,并返回 JSX 作为输出。组件 ,它们本质上是无状态的,只通过。函数组件是使用函数定义的。转载 2024-12-29 12:06:21 · 30 阅读 · 0 评论 -
【React】脚手架创建React项目
1. 如果你之前通过 npm install -g create-react-app 全局安装了create-react-app,建议使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸载软件包,以确保npx 始终使用最新版本。很久没有创建 React 项目了,今天使用脚手架创建项目时遇到了一些问题,这里记录一下。安装依赖时,React版本与模版预设版本不一致,根据提示修改依赖版本,改为。转载 2024-12-22 15:57:26 · 616 阅读 · 0 评论 -
【React+Antd】Antd4 AutoComplete无法回填属性问题
1. 通过Select + Option 属性配置选项内容时,可以设置 optionLabelProp=“label” 对内嵌内容进行搜索。通过 options 属性配置选项内容,建议设置 optionFilterProp=“label” 来对内容进行搜索。2. 当出现无法展示列表内容时,可以禁用或重新 filterOption。该写法可能存在有内容无法展示的情况,如下所示。无法正常回填属性名称了,只能回填。Antd官方做了属性变更不再支持。为值的输入,不兼容会报错无法运行。为值的输入,想实现类似。转载 2024-12-22 14:00:55 · 75 阅读 · 0 评论 -
【TypeScript】内置条件类型约束的使用
官网地址:https://www.typescriptlang.org/play/用于处理联合类型,可以提取联合类型中的类型定义(只保留提取的联合类型)的作用刚好相反,可把定义好的对象类型(必选+可选项)全部转化为。用于处理联合类型,可以排除联合类型中的类型定义,作用和。可以把定义好的对象类型(必选+可选项)全部转化为。可以采集已定义对象中需要的一部分生成新的类型定义。可以剔除已定义对象中不需要的部分生成新的类型定义。这两天接到了一个PC开发的任务,项目使用。用于联合类型,可以排除类型定义中为。转载 2024-12-22 11:24:15 · 45 阅读 · 0 评论