React 零散知识记录

样式隔离

在vue 中可以使用scoped属性实现样式隔离

javascript 复制代码

<style scoped>
</style>

但是在React 中如何实现呢，可以使用CSS Modules

CSS Modules 是 React 生态中最主流的样式隔离方案，它会自动将类名编译为唯一哈希值，从根本上避免冲突。

前置条件

React 脚手架（Create React App、Vite）已内置 CSS Modules 支持，无需额外配置
CSS 文件命名必须遵循 [文件名].module.css 格式（比如 Button.module.css）

缓存

创建持久化缓存

javascript 复制代码

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useLoginStore = create()(
    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 传值 / 回调的方式实现交互

javascript 复制代码

import { Modal } from "antd";
import { useState, useImperativeHandle, forwardRef } from "react";

export interface MenuSearchDialogRef {
  openDialog: () => void;
  closeDialog: () => void;
}

// 用forwardRef 包装组件，使父组件可以调用子组件的方法
// 第一个参数是子组件的props，第二个参数是ref。props未使用可以用_代替
const MenuSearchDialog = forwardRef<MenuSearchDialogRef>((_, ref) => {
  // 控制弹窗的打开与关闭
  const [visible, setVisible] = useState(false);

  // 打开弹窗
  const openDialog = () => {
    setVisible(true);
  };

  // 关闭弹窗
  const closeDialog = () => {
    setVisible(false);
  };

  // 向父组件暴漏方法
  useImperativeHandle(ref, () => ({
    openDialog,
    closeDialog,
  }));

  return (
    <Modal
      title="菜单搜索"
      visible={visible}
      onCancel={closeDialog}
      footer={null}
    ></Modal>
  );
});

export default MenuSearchDialog;