React 零散知识记录

样式隔离在vue中可以使用scoped属性实现样式隔离style scoped/style但是在React中如何实现呢可以使用CSS ModulesCSS Modules是React生态中最主流的样式隔离方案它会自动将类名编译为唯一哈希值从根本上避免冲突。前置条件React 脚手架Create React App、Vite已内置CSS Modules支持无需额外配置CSS 文件命名必须遵循[文件名].module.css格式比如Button.module.css缓存创建持久化缓存import{create}fromzustand;import{persist}fromzustand/middleware;exportconstuseLoginStorecreate()(persist((set)({userInfo:{},menuList:[],buttonList:[],dictList:[],setUserInfo:(userInfo)set((state)({userInfo:{...state.userInfo,...userInfo},})),clearUserInfo:()set({userInfo:{},}),setPermissions:({menuList,buttonList,dictList})set((state)({menuList:menuList??state.menuList,buttonList:buttonList??state.buttonList,dictList:dictList??state.dictList,})),clearStore:()({userInfo:{},menuList:[],buttonList:[],dictList:[],}),}),{name:loginStore,}));父组件调用子组件方法注意尽量少用这种方式React 提倡单向数据流父组件调用子组件方法属于 “反向操作”优先通过 props 传值 / 回调的方式实现交互import{Modal}fromantd;import{useState,useImperativeHandle,forwardRef}fromreact;exportinterfaceMenuSearchDialogRef{openDialog:()void;closeDialog:()void;}// 用forwardRef 包装组件使父组件可以调用子组件的方法// 第一个参数是子组件的props第二个参数是ref。props未使用可以用_代替constMenuSearchDialogforwardRefMenuSearchDialogRef((_,ref){// 控制弹窗的打开与关闭const[visible,setVisible]useState(false);// 打开弹窗constopenDialog(){setVisible(true);};// 关闭弹窗constcloseDialog(){setVisible(false);};// 向父组件暴漏方法useImperativeHandle(ref,()({openDialog,closeDialog,}));return(Modal title菜单搜索visible{visible}onCancel{closeDialog}footer{null}/Modal);});exportdefaultMenuSearchDialog;