React笔记

React

React 简介

• 由 Meta 公司开发，用于构建 Web 和原生交互界面的库
• 优势：
  • 组件化开发方式
  • 高性能
  • 丰富生态
  • 跨平台支持

开发环境创建

使用 create-react-app 快速创建项目：

npx create-react-app react-basic

JSX 基础

基本概念

• JSX 是 JavaScript 和 HTML 的混合语法
• 示例：

const message = 'this is message'
function App(){
  return (
    <div>
      <h1>this is title</h1>
      {message}
    </div>
  )
}

表达式使用

• 使用大括号 {} 嵌入 JavaScript 表达式

• 支持变量、函数调用等

  function App() {
    function formatDate() {
      return new Date().toLocaleDateString()
    }
    
    return (
      <div>
        <p>当前日期: {formatDate()}</p>
      </div>
    )
  }

列表渲染

使用 map 方法渲染列表：

const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'}
]
function App(){
  return (
    <ul>
      {list.map(item=><li key={item.id}>{item.name}</li>)}
    </ul>
  )
}

条件渲染

• 使用 && 运算符

  function App() {
    const name = '张三'
    
    return (
      <div>
        <p>用户名: {name}</p>
      </div>
    )
  }

• 使用三元表达式 ?:

  function App() {
    const isLoading = true
    
    return (
      <div>
        {isLoading ? (
          <span>加载中...</span>
        ) : (
          <span>内容加载完成</span>
        )}
      </div>
    )
  }

• 复杂条件渲染

  function App() {
    const status = 2 // 0|1|2
    
    const renderContent = () => {
      if (status === 0) {
        return <div>状态0的内容</div>
      } else if (status === 1) {
        return <div>状态1的内容</div>
      } else {
        return <div>默认内容</div>
      }
    }
    
    return (
      <div>
        {renderContent()}
      </div>
    )
  }

JSX 表达式使用详解

基本语法

在 JSX 中，使用 {} 包裹 JavaScript 表达式：

const name = '李四';
const element = <h1>你好, {name}</h1>;

变量渲染

function Greeting() {
  const username = '张三';
  return <p>欢迎回来, {username}!</p>;
}

函数调用

function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: '张', lastName: '三丰' };
const element = <h2>你好, {formatName(user)}!</h2>;

运算表达式

function Calculator() {
  const a = 10;
  const b = 5;
  return (
    <div>
      <p>加法: {a + b}</p>
      <p>乘法: {a * b}</p>
      <p>比较: {a > b ? 'a更大' : 'b更大'}</p>
    </div>
  );
}

对象属性访问

const product = {
  name: 'iPhone',
  price: 5999,
  specs: {
    color: '黑色',
    storage: '128GB'
  }
};

function ProductInfo() {
  return (
    <div>
      <p>名称: {product.name}</p>
      <p>价格: ¥{product.price}</p>
      <p>颜色: {product.specs.color}</p>
    </div>
  );
}

数组方法

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  return (
    <ul>
      {numbers.map((num) => (
        <li key={num}>数字: {num}</li>
      ))}
    </ul>
  );
}

Lodash 工具库

简介

Lodash 是一个流行的 JavaScript 实用工具库，提供了许多高效、可靠的函数，可以简化数组、对象、字符串等数据类型的操作。

安装

npm install lodash

常用方法示例

1. 数组操作

import _ from 'lodash';

// 数组去重
const arr = [1, 2, 2, 3];
const uniqueArr = _.uniq(arr); // [1, 2, 3]

// 数组分块
const chunked = _.chunk(['a', 'b', 'c', 'd'], 2); // [['a', 'b'], ['c', 'd']]

2. 对象操作

// 深拷贝对象
const obj = { a: 1, b: { c: 2 } };
const cloned = _.cloneDeep(obj);

// 合并对象
const merged = _.merge({ a: 1 }, { b: 2 }); // { a: 1, b: 2 }

3. 字符串处理

// 转换字符串格式
_.camelCase('Foo Bar'); // 'fooBar'
_.kebabCase('FooBar'); // 'foo-bar'

4. 实用函数

// 防抖函数
const debouncedFn = _.debounce(() => {
  console.log('Resized');
}, 200);

// 节流函数
const throttledFn = _.throttle(() => {
  console.log('Scrolled');
}, 100);

事件绑定

基本语法

function App(){
  const clickHandler = ()=>{
    console.log('button clicked')
  }
  return <button onClick={clickHandler}>click me</button>
}

事件参数

const clickHandler = (e)=>{
  console.log('event', e)
}

自定义参数

<button onClick={()=>clickHandler('jack')}>click me</button>

组件基础

组件定义

function Button(){
  return <button>click me</button>
}
function App(){
  return (
    <div>
      <Button/>
    </div>
  )
}

状态管理 useState

基本使用

function App(){
  const [count, setCount] = useState(0)
  return (
    <button onClick={()=>setCount(count+1)}>
      {count}
    </button>
  )
}

状态修改规则

• 状态是只读的，必须通过 set 方法更新
• 对象类型状态需要提供全新对象

样式处理

行内样式

<div style={{ color:'red' }}>text</div>

这个实际上是react语法的大括号里面套了一个对象

CSS 类名

import './index.css'
function App(){
  return <span className="foo">text</span>
}

表单控制

受控绑定

表单元素的值完全由React状态控制，每次输入都会触发状态更新，实现数据与UI的同步绑定。

function App() {
  const [value, setValue] = useState('');
  return (
    <input 
      type="text" 
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

非受控绑定

通过ref直接操作DOM获取表单值，React不直接管理输入过程，适合简单场景或集成第三方库。

function App() {
  const inputRef = useRef(null);
  
  const onChange = () => {
    console.log(inputRef.current.value);
  };
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  );
}

组件通信

父子通信（父传子）

通过props将父组件数据传递给子组件。

function Son(props) {
  return <div>{props.name}</div>;
}

function App() {
  const name = 'App数据';
  return <Son name={name} />;
}

父子通信（子传父）

父组件传递回调函数给子组件，子组件调用该函数传回数据。

function Son({ onGetMsg }) {
  const sonMsg = '子组件数据';
  return <button onClick={() => onGetMsg(sonMsg)}>发送</button>;
}

function App() {
  const getMsg = (msg) => console.log(msg);
  return <Son onGetMsg={getMsg} />;
}

兄弟组件通信

通过状态提升，将共享状态放在共同的父组件中管理。

function App() {
  const [name, setName] = useState('');
  return (
    <>
      <A onGetAName={setName} />
      <B name={name} />
    </>
  );
}

跨层组件通信

使用Context API实现跨层级数据传递。

const MsgContext = createContext();

function B() {
  const msg = useContext(MsgContext);
  return <div>{msg}</div>;
}

function App() {
  return (
    <MsgContext.Provider value="跨层数据">
      <A />
    </MsgContext.Provider>
  );
}

副作用管理

什么是副作用

副作用是指组件渲染过程中与外部系统的交互操作，这些操作可能会影响其他组件或产生外部可观察的变化。

React组件的主要工作是渲染UI，但有时需要执行数据获取、订阅事件、手动修改DOM等”副作用”操作。

何时需要考虑副作用

在以下场景中需要使用useEffect处理副作用：

1. 数据获取：组件加载后从API获取数据
2. 事件订阅：添加/移除事件监听器
3. DOM操作：手动修改DOM元素
4. 定时器：设置/清除定时器
5. 第三方库集成：初始化非React库

基础使用

useEffect(() => {
  // 执行副作用操作
  //像获取界面数据这种往往只需要在组件挂载的时候执行一次，不需要每次渲染都执行
  fetchData();
}, [dependencies]); // 依赖项数组

清除副作用

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer); // 清理函数
}, []);

依赖项详解

依赖项数组决定了副作用函数何时重新执行：

1. 无依赖数组：

   useEffect(() => {
   // 每次组件渲染后都会执行
   });

2. 空依赖数组：

   useEffect(() => {
   // 仅在组件挂载时执行一次
   }, []);

3. 有依赖项：

   useEffect(() => {
   // 在组件挂载时执行
   // 当依赖项的值变化时重新执行
   }, [count, name]); // 依赖 count 和 name 的变化

自定义Hook

封装可复用的逻辑，必须以use开头命名。

//这里分装了一个只会true false变换的变量
function useToggle(initialValue) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

Hooks使用规则

1. 只能在函数组件或自定义Hook的顶层调用
2. 不可在循环、条件判断或嵌套函数中调用Hook

// 错误示例
if (condition) {
  useEffect(() => {});
}

Redux 状态管理

Redux 介绍

Redux 是 React 最常用的集中状态管理工具，类似于 Vue 中的 Pinia/Vuex，可以独立于框架运行。它的主要作用是通过集中管理的方式管理应用的状态。

Redux 核心概念

数据流架构

Redux 的数据修改遵循严格的单向数据流规则：

1. State：一个对象，存放管理的数据
2. Action：一个对象，描述如何修改数据
3. Reducer：一个函数，根据 action 的描述更新 state

基本使用流程

1. 定义 reducer 函数
2. 使用 createStore 生成 store 实例
3. 使用 store.subscribe 订阅数据变化
4. 使用 store.dispatch 提交 action
5. 使用 store.getState 获取最新状态

Redux 与 React 集成

环境配置

React官方要求安装Redux Toolkit和react-redux插件

前者是工具集合简化书写，后者用来链接react组件和redux

npm install @reduxjs/toolkit react-redux

Store 结构设计

index.js负责组合modules里的所有子模块，并导出store

/store
  /modules
    counterStore.js
    userStore.js
  index.js

创建 Store

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

注入 React 应用

import { Provider } from 'react-redux'
import store from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

Redux Toolkit 使用

创建 Slice

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

组件中使用

import { useSelector, useDispatch } from 'react-redux'
import { increment } from '../store/modules/counterStore'

function Counter() {
  const count = useSelector(state => state.counter.count)
  const dispatch = useDispatch()

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
    </div>
  )
}

高级用法

异步 Action

const fetchUserData = () => {
  return async (dispatch) => {
    const res = await axios.get('/api/user')
    dispatch(setUserData(res.data))
  }
}

const dispatch = useDispatch()
useEffect(()=>{
	dispatch(fetchUserData())
},[dispatch])

Action 传参

reducers: {
  addToCount(state, action) {
    state.count += action.payload
  }
}

// 组件中使用
dispatch(addToCount(10))

调试工具

Redux DevTools 提供了强大的调试功能，可以实时查看 state 变化和 action 提交记录。

React Router

前端路由实现了不同URL路径显示不同组件的功能，所有的页面跳转都在浏览器端完成，无需向服务器请求完整页面。

环境搭建

npm install react-router-dom

路由模块化

将路由配置单独抽离为模块，保持项目结构清晰

推荐目录结构：

/src
  /pages
    Home.jsx
    About.jsx
  /router
    index.js

路由导航

声明式导航

使用<Link>组件实现导航，类似HTML的<a>标签但不会刷新页面

<Link to="/about">关于我们</Link>
<Link to={`/user/${userId}`}>用户详情</Link>  // 动态路径

编程式导航

通过useNavigatehook在代码中控制跳转，适合表单提交后等场景

const navigate = useNavigate();

function handleLogin() {
  //...登录逻辑
  navigate('/dashboard'); // 跳转
  navigate(-1); // 返回上一页
}

路由传参

1. searchParams

参数会显示在URL中，适合传递筛选条件等简单参数

// 传参代码
import { useNavigate } from 'react-router-dom';

function FilterComponent() {
  const navigate = useNavigate();
  
  const applyFilters = () => {
    // 传递多个参数
    navigate('/products?category=electronics&price=100-500&sort=desc');
  };

  return <button onClick={applyFilters}>应用筛选</button>;
}

// 取参代码
import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams] = useSearchParams();
  
  // 获取单个参数
  const category = searchParams.get('category');
  
  // 获取所有参数
  const params = Object.fromEntries(searchParams.entries());
  
  return (
    <div>
      当前筛选: {category} <br />
      全部参数: {JSON.stringify(params)}
    </div>
  );
}

2. params

参数会成为URL路径的一部分，适合传递资源ID等必要参数

// 路由配置中需要定义参数占位符
const router = createBrowserRouter([
  {
    path: '/user/:userId',
    element: <UserDetail />
  }
]);

// 传参代码
function UserList() {
  const navigate = useNavigate();
  
  const viewUser = (id) => {
    navigate(`/user/${id}`);  // 参数直接拼接到路径中
  };

  return (
    <button onClick={() => viewUser(123)}>
      查看用户123
    </button>
  );
}

// 取参代码
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { userId } = useParams();  // 获取路由参数
  
  return <div>用户ID: {userId}</div>;
}

3. state

参数不会显示在URL中，适合传递敏感数据或复杂对象

// 传参代码
function LoginForm() {
  const navigate = useNavigate();
  
  const handleLogin = () => {
    const userData = {
      id: 123,
      name: '张三',
      token: 'abc123xyz'
    };
    
    navigate('/dashboard', { 
      state: { 
        user: userData,
        loginTime: new Date() 
      } 
    });
  };

  return <button onClick={handleLogin}>登录</button>;
}

// 取参代码
import { useLocation } from 'react-router-dom';

function Dashboard() {
  const { state } = useLocation();
  
  return (
    <div>
      欢迎, {state?.user?.name} <br />
      登录时间: {state?.loginTime?.toLocaleString()}
    </div>
  );
}

嵌套路由

配置方法

通过children属性定义嵌套关系，Outlet作为子路由的渲染出口

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },  // 默认二级路由
      { path: 'profile', element: <Profile /> }
    ]
  }
])

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />  {/* 子路由渲染位置 */}
      <Footer />
    </div>
  )
}

高级配置

404路由

{
  path: '*',
  element: <NotFoundPage />
}

路由模式

1. History 模式 (createBrowserRouter)

特点与配置

// 创建方式
import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  // 路由配置
]);

// 服务器配置示例（以Nginx为例）
server {
  listen 80;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

优势：

• URL更简洁美观（无#号）
• 符合标准URL规范
• 支持HTML5 History API

注意事项：

1. 服务器配置要求：

   • 所有路径请求都应返回index.html
   • 需要配置URL重写规则

2. 常见服务器配置：

   # Nginx生产配置
   location / {
     root /usr/share/nginx/html;
     index index.html;
     try_files $uri $uri/ /index.html;
   }

3. 适用场景：

   • 生产环境
   • 需要SEO友好的项目
   • 需要干净URL的项目

4. Hash 模式 (createHashRouter)

特点与配置

// 创建方式
import { createHashRouter } from 'react-router-dom';

const router = createHashRouter([
  // 路由配置
]);

优势：

• 无需服务器特殊配置
• 兼容性极佳（支持IE9+）
• 适合静态文件服务器

特点：

1. URL格式：

   http://example.com/#/path
   http://example.com/#/user/123

2. 工作原理：

   • 使用URL hash部分（#后的内容）实现路由
   • 改变hash不会触发页面刷新
   • 监听hashchange事件实现路由切换

3. 适用场景：

   • 静态网站托管（GitHub Pages等）
   • 旧版浏览器支持
   • 快速原型开发
   • 无服务器配置权限的情况

生产境建议

1. 首选History模式：

   • 配置服务器支持URL重写
   • 提供更专业的用户体验

2. Hash模式备用方案：

   • 当无法控制服务器配置时使用

   • 添加兼容性提示：

     // 检测浏览器兼容性
     if (!window.history.pushState) {
       alert('建议使用现代浏览器获得更好体验');
     }

3. 混合模式策略：

   // 根据环境自动选择路由模式
   const isProduction = process.env.NODE_ENV === 'production';
   const createRouter = isProduction ? createBrowserRouter : createHashRouter;
   
   const router = createRouter([
     // 路由配置
   ]);

React + TypeScript

项目初始化与配置

# 使用 npm
npm create vite@latest react-jike -- --template react-ts

# 或者使用 yarn
yarn create vite react-jike --template react-ts

# 进入项目目录
cd react-jike

# 安装依赖
npm install

# 启动项目
npm run dev

目录结构

-src
  -apis           # 项目接口函数
  -assets         # 项目资源文件，如图片等
  -components     # 通用组件
  -pages          # 页面组件
  -store          # 集中状态管理
  -utils          # 工具，如token、axios封装等
  -App.tsx        # 根组件
  -main.tsx       # 项目入口
  -vite-env.d.ts  # 类型声明文件

状态管理最佳实践

useState 类型安全用法

// 基础类型 - 依赖类型推断
const [count, setCount] = useState(0); // 自动推断为number

// 对象类型 - 显式声明
interface User {
  id: string;
  name: string;
  email?: string; // 可选属性
}

const [user, setUser] = useState<User>({
  id: '1',
  name: 'John'
});

// 可能为null的情况
const [currentUser, setCurrentUser] = useState<User | null>(null);

useRef 类型安全用法

// DOM引用
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus(); // 安全访问
}, []);

// 可变值容器
const timerRef = useRef<number | null>(null);

useEffect(() => {
  timerRef.current = window.setTimeout(() => {
    // ...
  }, 1000);
  
  return () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  };
}, []);

配置路径别名

修改 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

创建 tsconfig.json配置

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

安装 Ant Design

npm install antd @ant-design/icons

按需加载样式配置

修改 vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#1890ff', // 主题色
        },
      },
    },
  },
})

配置路由

安装 react-router-dom

npm install react-router-dom @types/react-router-dom

路由配置

src/router/index.tsx
import { lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import type { RouteObject } from 'react-router-dom'

const Login = lazy(() => import('@/pages/Login'))
const Layout = lazy(() => import('@/pages/Layout'))
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'article',
        element: <Article />,
      },
      {
        path: 'publish',
        element: <Publish />,
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
]

const router = createBrowserRouter(routes)

export default router

修改 main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

组件Props类型定义

基础组件Props

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger'; // 联合类型
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children
}: ButtonProps) => {
  return (
    <button 
      className={`btn-${variant} size-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

复杂组件Props

interface DataTableProps<T> {
  data: T[];
  columns: {
    key: keyof T;
    title: string;
    render?: (value: T[keyof T], row: T) => React.ReactNode;
  }[];
  onRowClick?: (item: T) => void;
}

export function DataTable<T>({ data, columns, onRowClick }: DataTableProps<T>) {
  return (
    <table>
      {/* 表格实现 */}
    </table>
  );
}

// 使用示例
interface Product {
  id: number;
  name: string;
  price: number;
}

<DataTable<Product> 
  data={products}
  columns={[
    { key: 'name', title: 'Product Name' },
    { key: 'price', title: 'Price' }
  ]}
/>

事件处理类型安全

// 表单事件
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  console.log(e.target.value);
};

// 鼠标事件
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  e.preventDefault();
  // ...
};

// 自定义事件
interface CustomEvent {
  detail: {
    message: string;
    timestamp: number;
  };
}

const handleCustomEvent = (e: CustomEvent) => {
  console.log(e.detail.message);
};

API请求类型安全

interface ApiResponse<T> {
  data: T;
  status: number;
  message?: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  const response = await fetch(url);
  const data = await response.json();
  return {
    data,
    status: response.status
  };
}

// 使用示例
interface User {
  id: number;
  name: string;
}

const { data } = await fetchData<User[]>('/api/users');

Context API类型安全

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义hook
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

高阶组件类型处理

interface WithLoadingProps {
  loading: boolean;
}

function withLoading<P extends object>(
  Component: React.ComponentType<P>
): React.FC<P & WithLoadingProps> {
  return ({ loading, ...props }: WithLoadingProps & P) => {
    return loading ? (
      <div>Loading...</div>
    ) : (
      <Component {...(props as P)} />
    );
  };
}

// 使用示例
interface UserCardProps {
  user: User;
}

const UserCard: React.FC<UserCardProps> = ({ user }) => {
  return <div>{user.name}</div>;
};

const UserCardWithLoading = withLoading(UserCard);

// 使用时
<UserCardWithLoading 
  loading={isLoading} 
  user={currentUser} 
/>

axios安装配置

安装axios

npm i axios

简易封装

import axios from 'axios'

const requestInstance = axios.create({
  baseURL: 'http://baidu.cn/v1_0',
  timeout: 5000,
})

requestInstance.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

requestInstance.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default requestInstance

可以在一个index.ts里面把所有工具类都给导出：

import requestInstance from './http'

export { requestInstance as http }

封装泛型

export type ResType<T> = {
  message: string
  data: T
}

封装请求函数

import { http } from '@/utils'
import type { ResType } from './shared'

type ChannelRes = {
  channels: { id: number; name: string }[]
}

export function fetchChannelAPI() {
  return http.request<ResType<ChannelRes>>({
    url: '/channels',
  })
}

测试API函数

fetchChannelAPI().then((res) => {
  console.log(res.data.data.channels)
})

• 本文作者： NICK
• 本文链接： https://nicccce.github.io/TechNotes/React-Note/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！