随笔分类 - react
摘要：受控模式 严格来说，虽然从业务上来说这是一个表单，但从编码上来看 并没有用到 form！ 其中共涉及到如下定义和维护的状态： 表单本身数据的状态 formData（由于使用了受控组件，因此需要为该字段提供默认值） 提交中状态 isPending 提交结果状态 submitResult import
阅读全文
摘要：前言 useActionState是react19新出的api，提供的非受控表单钩子。 但是他有一个缺点，就是每次提交表单后会重置表单状态！ 官方美其名曰“遵守原生表现”，但是网上讨伐声音，就足以证明垃圾！ https://github.com/facebook/react/issues/29034
阅读全文
摘要：前言 shadcn表单相关的了解，可知道 shadcn 目前推出了3种方式来处理表单（毕竟shadcn只做ui，要想处理好完整表单就涉及到可控、校验等问题）：react-hook-form、tanstack、useActionState 实际项目中，选一种你喜欢和熟悉的方式去用即可，不过目测第三者会
阅读全文
摘要：最小可shadcn可初始化环境 一般我们会将shadcn集成到现有的前端框架项目中，比如vite、nextjs等等。 但是如果我们要把shadcn抽离出来，成为一个单独的组件库项目，供多个项目使用，那么我们就要创建一个最小可运行的环境，来支持shadcn初始化以及后续的组件安装。 我们在执行pnpm
阅读全文
摘要：安装 新版路由简化了安装，只需要以下命令即可 npm i react-router 创建路由文件 在项目根目录下创建路由文件 src\router\index.ts import { lazy } from 'react' import Root from '../components/root'
阅读全文
摘要：集成tailwind 这一步较为简单，仅需按照官网步骤即可~ 这里不再赘述！ 稍微需要注意的是，你的集成配置都需要在 electron.vite.config.ts! 补全tsconfig.json { // ... "compilerOptions": { "composite": true, "
阅读全文
摘要：入门版本 创建一个store，包含ctx、reduce、dispatch+action import { createContext, useContext } from 'react'; // 定义ctx export const defaultValue = { count: 0, }; exp
阅读全文
摘要：props与memo 如下所示例子中，因为App内部状态的更新，总会牵连其无辜子组件Demo的更新。 const Demo = () => { console.log('Demo render'); return ( <div> 我是子组件 </div> ); }; const App = () =
阅读全文
摘要：import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(cls
阅读全文
摘要：问题本质 ScrollArea（如 Radix UI、shadcn/ui 等）无法滚动的根本原因是缺乏明确的高度约束。ScrollArea 需要知道自己的确切高度才能计算是否需要显示滚动条。 常见错误模式 // ❌ 错误：ScrollArea 无法获得明确高度 <div className="con
阅读全文
摘要：原文在此！ 如果你正在管理多个 React 应用，并希望在ui保持一致，迟早你会发现需要一个组件库。 当我第一次想要创建一个 React 组件库时，花了很多时间 才找到一个满足我所有要求 且不太复杂的设置。 本篇指南可以为我节省大量与这些东西搏斗的精力，我也希望它能帮助到你。 此文章涵盖了 Reac
阅读全文
摘要：我们经常会看到这样的场景：一个组件改了 props，紧接着用 useEffect 重置 useState；或者每次函数都用 useCallback 包起来，生怕性能不够“丝滑”。其实，这些“反射式优化”不仅没有带来好处，反而拖慢了你的 UI，制造了更多不可预测的问题。 React 官方文档已经为这些
阅读全文
摘要：guojiabing 大佬推荐了一些比较优秀的库，这里做一些笔记，防止忘记！ ahooks a就是alibaba 的第一个字母，也就是阿里加的产品！ 它内置了一堆好用且实用的hooks！ useRequest 封装的http请求hook // 同步xxx，其中返回值都是响应式的状态 const {
阅读全文
摘要：我以为如下代码会死循环 : import { FC, useEffect, useState } from 'react'; interface HeadFormProps { value: string; onChange: (values: string) => void; } const He
阅读全文
摘要：前言 提到父子组件通讯，我们自然而然的就想到了下一种办法：将需要沟通的状态定义到父组件上，然后在将 状态和设置状态都传入子组件！ import { useState } from 'react'; const HeadForm = (props) => { const [motto, setMott
阅读全文
摘要：React 的状态更新机制一直是开发者关注的重点。早期的 React 允许在 setState 中使用第二个回调参数来处理状态更新完成后的操作，但随着 React Hooks 的引入，这种用法被废弃。React 18 引入了 flushSync，使得开发者可以同步更新状态并立即获取最新的状态值。这使
阅读全文
摘要：前言 大部分情况下，我们并没有关注删除的交互，所以这种删除其实就是刷新列表的感觉 🤔 大家都这么做，而且也历来都这么做，这让我觉得很习以为然正常不过的事情， 😮 直至前几天测试找我说：“在列表数据过于相似，而且还超出隐藏了一部分的情况下，我很难反应过来是否已经被删除了”。 👨🏫 她其实说的
阅读全文
摘要：基础使用 roughjs 手绘支持两种渲染方式，canvas和svg。 canvas import rough from 'roughjs'; import { useRef } from 'react'; import { useMount } from 'ahooks'; export defa
阅读全文
摘要：背景 我要监听一个视频播放当前进度时间，并把显示到页面上。 使用传统state function DemoOne() { const [currentTime, setCurrentTime] = useState(0); const videoRef = useRef<HTMLVideoEleme
阅读全文
摘要：创建一个上下文对象 // my-context.js import { createContext } from 'react'; export default createContext(null); 注入到 根组件中，并传入值 value // app.tsx import { useState
阅读全文
浙公网安备 33010602011771号