文章目录

• 优雅的加载条
• • 安装相应版本的Ant Design
  • 简单场景
  • • 1.创建一个 Loading Wrapper 组件
    • 2.使用 Loading Wrapper 组件
  • 复杂场景
  • • 1. 使用 Context API 进行全局加载状态管理
    • 2.借助Redux进行状态管理
    • • 安装 Redux 和相关库：
      • 创建 Redux Store
      • 在顶层组件中提供 Redux Store
      • 在组件中使用 Redux 状态
  • 知识加油站
  • • Redux和Context API 的关系
    • Redux
    • Context API
    • Redux 和 Context API 的关系

优雅的加载条

React 应用中使用组件库的加载条（Loading Bar）并保持代码优雅，可以遵循以下步骤。以下示例将使用 Ant Design 组件库的 Spin 组件作为加载条示例，并通过组件化、状态管理和样式组织实现优雅的代码。

安装相应版本的Ant Design

npm install antd 

简单场景

1.创建一个 Loading Wrapper 组件

创建一个通用的 Loading Wrapper 组件，用于在任何需要加载状态的地方使用

import React from 'react'; import { Spin } from 'antd'; import PropTypes from 'prop-types';  //加载组件 const LoadingWrapper = ({ loading, children }) => {   return (     loading}>       {children}        ); };  LoadingWrapper.propTypes = {   loading: PropTypes.bool.isRequired,   children: PropTypes.node.isRequired, };  export default LoadingWrapper;  

2.使用 Loading Wrapper 组件

在需要显示加载状态的组件中使用 LoadingWrapper 组件

import React, { useState, useEffect } from 'react'; import { List, message } from 'antd'; import LoadingWrapper from './LoadingWrapper'; import axios from 'axios';  const DataFetchingComponent = () => {   const [loading, setLoading] = useState(true);//初始值要开启加载条   const [data, setData] = useState([]);    useEffect(() => {     axios.get('/api/data')       .then(response => {         setData(response.data);         setLoading(false);//关闭加载条       })       .catch(error => {         message.error('Failed to fetch data');         setLoading(false);       });   }, []);    return (     loading}>       data}         renderItem={item => {item}}       />        ); };  export default DataFetchingComponent; 

复杂场景

对于更复杂的应用，可以使用全局状态管理工具（如 Redux 或 Context API）来管理加载状态。

1. 使用 Context API 进行全局加载状态管理

import React, { createContext, useState, useContext } from 'react'; //创建一个 Loading Context： const LoadingContext = createContext();  export const useLoading = () => useContext(LoadingContext);  export const LoadingProvider = ({ children }) => {   const [loading, setLoading] = useState(false);    return (     { loading, setLoading }}>       {children}        ); }; 

//在顶层组件中使用 LoadingProvider import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { LoadingProvider } from './LoadingContext';  ReactDOM.render(           ,   document.getElementById('root') );  

//在组件中使用全局加载状态 import React, { useEffect } from 'react'; import { List, message } from 'antd'; import LoadingWrapper from './LoadingWrapper'; import axios from 'axios'; import { useLoading } from './LoadingContext';  const DataFetchingComponent = () => {   const { loading, setLoading } = useLoading();   const [data, setData] = useState([]);    useEffect(() => {     setLoading(true);//初始值为开启加载     axios.get('/api/data')       .then(response => {         setData(response.data);         setLoading(false);       })       .catch(error => {         message.error('Failed to fetch data');         setLoading(false);       });   }, [setLoading]);    return (     loading}>       data}         renderItem={item => {item}}       />        ); };  export default DataFetchingComponent;  

2.借助Redux进行状态管理

安装 Redux 和相关库：

npm install redux react-redux @reduxjs/toolkit 

创建 Redux Store

import { configureStore, createSlice } from '@reduxjs/toolkit';  const loadingSlice = createSlice({   name: 'loading',   initialState: false,   reducers: {     setLoading: (state, action) => action.payload,   }, });  export const { setLoading } = loadingSlice.actions;  const store = configureStore({   reducer: {     loading: loadingSlice.reducer,   }, });  export default store; 

在顶层组件中提供 Redux Store

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import App from './App'; import store from './store';  ReactDOM.render(   store}>        ,   document.getElementById('root') );  

在组件中使用 Redux 状态

import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { List, message } from 'antd'; import LoadingWrapper from './LoadingWrapper'; import axios from 'axios'; import { setLoading } from './store';  const DataFetchingComponent = () => {   const loading = useSelector((state) => state.loading);   const dispatch = useDispatch();   const [data, setData] = useState([]);    useEffect(() => {     dispatch(setLoading(true));     axios.get('/api/data')       .then(response => {         setData(response.data);         dispatch(setLoading(false));       })       .catch(error => {         message.error('Failed to fetch data');         dispatch(setLoading(false));       });   }, [dispatch]);    return (     loading}>       data}         renderItem={item => {item}}       />        ); };  export default DataFetchingComponent; 

知识加油站

Redux和Context API 的关系

Redux 和 Context API 都是用于状态管理的工具，但它们有不同的特点和使用场景。以下是它们的主要区别和关系：

Redux

Redux 是一个流行的状态管理库，提供了一个集中式的状态存储和不可变状态更新的机制。Redux 适用于大型应用程序，具有以下特点：

• 集中式状态管理：所有的状态存储在一个单独的 store 中，便于调试和管理。
• 不可变状态更新：通过 actions 和 reducers 更新状态，确保状态不可变。
• 中间件支持：支持异步 actions 和其他中间件（如 redux-thunk、redux-saga）来处理复杂的逻辑。
• 丰富的生态系统：有许多工具和库可以与 Redux 集成，如 Redux DevTools。

Context API

Context API 是 React 提供的内置状态管理解决方案，适用于较小或中等规模的应用程序。它的特点包括：

• 简洁易用：内置于 React 中，无需额外安装。
• 组件树上下文传递：允许在组件树中传递数据，避免了 prop drilling。
• 轻量级：适合简单的状态管理场景，特别是当状态变化不频繁时。

Redux 和 Context API 的关系

• 使用场景：Redux 适用于复杂和大型应用程序，需要集中式状态管理和复杂的状态更新逻辑；Context API 则适用于较小和中等规模的应用程序，或需要简单状态传递的场景。
• 复杂性：Redux 提供了更多的结构和工具来管理复杂的状态和逻辑，但也引入了更多的复杂性；Context API 更加简洁，适合轻量级的状态管理。
• 性能：Context API 可能在频繁状态变化时导致性能问题，因为每次状态变化都会重新渲染使用该上下文的组件树；Redux 则通过连接（connect）和选择器（selectors）优化了这种问题。