随笔分类 - react
摘要：集成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
阅读全文
摘要：一句话概括 memo、useMemo、useCallBack主要用于避免 React 组件的重复渲染，作为 性能优化 的一种手段，你可以根据场景合理的使用它们。 React组件的更新机制 在使用memo、useCallBack、useMemo前，我们需要先了解React组件的更新机制：React组件
阅读全文
摘要：学习成本和开发体验 Vue：Vue 它的设计理念就是“渐进式”，意思就是你学一点用一点 甚至可以 cdn 引入到 html 中使用。而且由于其简洁的 API 和文档，学习曲线相对较平缓，但是受限于模板语法限制 灵活性不如 react。 React：反观 react 它更倾向于你上来就使用 cli 创
阅读全文
摘要：前言 假设我自定义了一个组件 全局导入的 <myNewElement foo="123" /> 此时ts会报异常 react18 在react 19 之前，我们可以这么做 declare global { namespace JSX { interface IntrinsicElements { m
阅读全文
摘要：启动react项目的时候，一直给我推荐他家的开发工具： ‘Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools’ 以下代码可以隐藏这恶心的广告。
阅读全文
摘要：react 封装的渲染富文本的组件： RenderRtf.tsx import { useState, useEffect, useRef } from "react"; import parse from "html-react-parser"; import ReactDOM from "rea
阅读全文
浙公网安备 33010602011771号