React 分类

以最基础的Report组件为例

定义入参也就是props

export interface BaseReportProps<S extends BaseReportParam, T> {
  searchRender?: React.ReactNode
  actionRender?: React.ReactNode
  reportApi?: SearchApi<S, T>
  reportParams: S
  tableColumns: TableColumnsType<T>
  tableHeight?: number
  ref?: React.Ref<BaseReportRef>
  showSearchAction?: boolean
}

Mr shen2026/1/17小于 1 分钟

路由与安全导航

使用react-router来实现路由导航和保护路由。

实例

    src/pages/Page.tsx
  
const Page = () => {
  const {i18n} = useTranslation()
  const {theme} = useAppStore()
  return (
    <BrowserRouter>
      <ConfigProvider
        locale={i18n.language === 'zh' ? zhCN : enUS}
        theme={{
          algorithm: [theme === 'dark' ? darkAlgorithm : defaultAlgorithm],
        }}
      >
        <App className="w-full h-full theme">
          <StaticMessage/>
          <RouterPage/>
        </App>
      </ConfigProvider>
    </BrowserRouter>
  )
}

Mr shen2026/1/17大约 2 分钟

公共数据管理 zustand

使用 zustand 来管理全局状态。

以用户数据举例

    src/store/userStore.ts
  
import {create} from 'zustand'
import {getLocalInfo, setLocalInfo} from '@/utils/localStorage'
import {MENU_TREE, PERMISSIONS, USER} from '@/utils/config.ts'
import {User, type UserDTO} from '@/api/user/types.ts'
import type {PermissionTreeNodeDTO} from '@/api/role/types.ts'

export interface IUserStore {
  userInfo: User
  permissions: string[]
  menuTree: Array<PermissionTreeNodeDTO>
  setUserInfo: (userInfo: UserDTO) => void
  setPermissions: (permissions: string[]) => void
  clearUserInfo: () => void
  setMenuTree: (menuTree: Array<PermissionTreeNodeDTO>) => void
}

export const useUserStore = create<IUserStore>(set => {
  return {
    userInfo: new User(getLocalInfo(USER) as UserDTO),
    permissions: getLocalInfo(PERMISSIONS) || [],
    menuTree: getLocalInfo(MENU_TREE) ?? [],
    setUserInfo: (userInfo: UserDTO) => {
      setLocalInfo(USER, userInfo)
      set({userInfo})
    },
    setPermissions: (permissions: string[]) => {
      setLocalInfo(PERMISSIONS, permissions)
      set({permissions})
    },
    setMenuTree: (menuTree: Array<PermissionTreeNodeDTO>) => {
      setLocalInfo(MENU_TREE, menuTree)
      set({menuTree})
    },
    clearUserInfo: () => {
      setLocalInfo(USER, null)
      set({userInfo: new User()})
    },
  }
})

Mr shen2026/1/17小于 1 分钟

request 封装axios

使用 axios 来封装请求。

    src/utils/request.ts
  
class AxiosRequest {
  // 实例
  instance: AxiosInstance
  // 拦截器对象
  interceptors: Undefinable<RequestInterceptors<AxiosResponse>>
  // 取消请求控制器
  abortControllerMap: Map<string, AbortController>

  constructor(config: CreateRequestConfig) {
    this.instance = axios.create(config)
    this.abortControllerMap = new Map()
    this.interceptors = config.interceptors
    // 拦截器执行顺序 接口请求 - 实例请求 - 全局请求 - 实例响应 - 全局响应 - 接口响应
    this.instance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
      const controller = new AbortController()
      res.signal = controller.signal
      const mapKey = this.generateMapKey(res)
        // 保存key到请求配置中，供响应拦截器使用
      ;(res as NewAxiosRequestConfig)._mapKey = mapKey
      // 如果存在则删除该请求
      if (this.abortControllerMap.get(mapKey)) {
        console.error('取消重复请求：', mapKey)
        this.cancelRequest(mapKey)
      } else {
        this.abortControllerMap.set(mapKey, controller)
      }
      return res
    })
    // 使用实例拦截器
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptors,
      this.interceptors?.requestInterceptorsCatch,
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptors,
      this.interceptors?.responseInterceptorsCatch,
    )
    // 全局响应拦截器保证最后执行
    this.instance.interceptors.response.use(
      // 因为我们接口的数据都在res.data下，所以我们直接返回res.data
      (res: AxiosResponse) => {
        // 从请求配置中获取之前保存的key
        const mapKey = (res.config as NewAxiosRequestConfig)._mapKey || ''
        this.abortControllerMap.delete(mapKey)
        return res.data
      },
      (err: object) => {
        return Promise.reject(err)
      },
    )
  }

  /**
   * 取消指定的请求
   * @param url - 待取消的请求URL
   */
  cancelRequest(url: string | string[]) {
    const urlList = Array.isArray(url) ? url : [url]
    for (const _url of urlList) {
      this.abortControllerMap.get(_url)?.abort()
      this.abortControllerMap.delete(_url)
    }
  }

  /**
   * 取消全部请求
   */
  cancelAllRequest() {
    for (const [, controller] of this.abortControllerMap) {
      controller.abort()
    }
    this.abortControllerMap.clear()
  }

  /**
   * get请求
   * @param url - 链接
   * @param options - 参数
   */
  get<T = object>(url: string, options = {}) {
    return this.instance.get(url, options) as Promise<ServerResult<T>>
  }

  /**
   * post请求
   * @param url - 链接
   * @param options - 参数
   * @param config
   */
  post<T = object>(url: string, options = {}, config?: AxiosRequestConfig<object>) {
    return this.instance.post(url, options, config) as Promise<ServerResult<T>>
  }

  /**
   * put请求
   * @param url - 链接
   * @param options - 参数
   * @param config
   */
  put<T = object>(url: string, options = {}, config?: AxiosRequestConfig<object>) {
    return this.instance.put(url, options, config) as Promise<ServerResult<T>>
  }

  /**
   * delete请求
   * @param url - 链接
   * @param options - 参数
   */
  delete<T = object>(url: string, options = {}) {
    return this.instance.delete(url, options) as Promise<ServerResult<T>>
  }

  /**
   * patch请求
   * @param url - 链接
   * @param options - 参数
   */
  patch<T = object>(url: string, options = {}) {
    return this.instance.patch(url, options) as Promise<ServerResult<T>>
  }

  /**
   * 生成请求的唯一key（考虑参数）
   */
  private generateMapKey(requestConfig: NewAxiosRequestConfig) {
    let url = requestConfig.method || ''
    if (requestConfig.url) url += `^${requestConfig.url}`
    // 如果存在参数
    if (requestConfig.params) {
      for (const key in requestConfig.params) {
        url += `&${key}=${requestConfig.params[key]}`
      }
    }
    // 如果存在post数据
    if (
      requestConfig.data &&
      requestConfig.data?.[0] === '{' &&
      requestConfig.data?.[requestConfig.data?.length - 1] === '}'
    ) {
      const obj = JSON.parse(requestConfig.data)
      for (const key in obj) {
        url += `#${key}=${obj[key]}`
      }
    }
    return url
  }
}

Mr shen2026/1/17大约 3 分钟

React 优化 Hooks

useMemo 和 useCallback

在 React 中，当一个父组件的状态或 Props 发生变化时，他会默认重新渲染其所有的子组件，即使传递给某些子组件的 Props 并未发生任何改变。为了避免这种浪费，我们可以使用 React.memo 来包裹子组件，使其只有在 Props 真正发生变化时才重新渲染。

这听起来很好，但会存在问题，如果父组件传给子组件的 Props 是一个对象，数组或者函数，那么在每次父组件渲染时，他们都会被重新创建，导致引用地址发生变化。从 React.memo 的角度来说，就等同于 Props 发生变化，从而导致优化失败。

Mr shen2025/12/11大约 1 分钟

Hooks 与生命周期

useEffect Hook 副作用操作

useEffect 是 React 提供给我们的一个逃生舱口，它允许我们在函数式组件中

import {useEffect} from "react";

useEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作
  };
}, [依赖项]);

Mr shen2025/11/12大约 5 分钟

React 19 核心特征

Action 表单交互的革命

使用<form> 的 action 属性简化数据提交

在 React 19 中，我们可以直接将一个函数（即 Action）传递给原生的<form> 元素的action属性,当你提交这个表单的时候，React 会自动拦截提交事件，处理表单数据的序列化（FormData）, 并调用你提供的 Action 函数，这意味着，我们可以告别onSubmit事件处理器和preventDefault()。

Mr shen2025/11/12大约 4 分钟

开发核心概念

创建命令

pnpm create vite@latest

Mr shen2025/11/11大约 1 分钟

组件化开发核心

Props 和组件通信

组件之间相互协作，传递信息，共同构建完整的用户界面。实现组件间通信最基础、最核心的机制，就是 Props。
父传子通过 Props 子传父通过事件处理

    App.tsx
  
function App() {
  return (
    <Hellow
      title="hello"
      onChange={(count) => {
        console.log(count);
      }}
    />
  );
}

Mr shen2025/11/11大约 4 分钟