随笔分类 -  React

React 列表定时轮询刷新+滚动加载
摘要：1、安装依赖 npm i antd npm i react-infinite-scroll-component 2、DataList.tsx import React, { useEffect, useRef } from "react"; import { Spin } from "antd"; 阅读全文
posted @ 2025-08-25 16:55 苏沐~ 阅读(27) 评论(0) 推荐(0)
React 可拖拽组件MovableBox封装
摘要：npm i react-spring 一、拖拽组件封装 import React, { useState, useRef, useEffect, useCallback } from "react"; import { useSpring, animated } from "@react-sprin 阅读全文
posted @ 2025-07-17 15:36 苏沐~ 阅读(48) 评论(0) 推荐(0)
React MoveBoxComponent
摘要：npm i react-spring import React, { useState, useRef, useEffect } from "react"; import { useSpring, animated } from "@react-spring/web"; interface IPos 阅读全文
posted @ 2025-07-15 09:18 苏沐~ 阅读(11) 评论(0) 推荐(0)
React useSyncExternalStore 封装 useWindowSize、useURLParams
摘要：useWindowSize // useWindowSize.ts import { useRef, useCallback, useSyncExternalStore } from "react"; export function useWindowSize() { const cachedVal 阅读全文
posted @ 2025-06-25 12:06 苏沐~ 阅读(24) 评论(0) 推荐(0)
React useSyncExternalStore 封装 localStorage 实现跨页面同步状态
摘要：// useLocalStorage.ts import { useSyncExternalStore, useCallback } from "react"; // 使用泛型提升类型安全 export function useLocalStorage<T>( key: string, initia 阅读全文
posted @ 2025-06-24 15:51 苏沐~ 阅读(61) 评论(0) 推荐(0)
React useTransition 和 useDeferredValue 使用
摘要：useTransition 适用场景 1. 数据加载：在数据加载过程中，我们可以使用 useTransition 在更新 UI 之前显示一个加载指示器，从而优化用户体验。 2. 动画和过渡效果：在组件状态更新时，useTransition 可以让我们更好地控制动画和过渡效果的触发时机。 useDef 阅读全文
posted @ 2025-06-24 11:19 苏沐~ 阅读(109) 评论(0) 推荐(0)
React 使用 forwardRef 和 useImperativeHandle —— 父组件调用子组件事件
摘要：import React, { useState, useImperativeHandle, forwardRef, useRef, Ref, } from "react"; interface IProps { readonly List?: Array<any>; readonly fun?: 阅读全文
posted @ 2025-06-23 15:16 苏沐~ 阅读(14) 评论(0) 推荐(0)
React 滚动监听 和 tab 切换
摘要：Tabs组件 //Tabs.tsx import React from "react"; import classNames from "classnames"; import "./index.scss"; interface IProps { readonly tabs: Array<Itab> 阅读全文
posted @ 2025-06-10 18:07 苏沐~ 阅读(52) 评论(0) 推荐(0)