基于Antd4 和React-hooks的项目开发

2023-12-22 00:45
文章标签 javascript react 项目 开发 frontend hooks antd4

本文主要是介绍基于Antd4 和React-hooks的项目开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基于Antd4 和React-hooks的项目开发

https://github.com/dL-hx/react-cnode

项目依赖使用

  • react 16.13
  • react-redux 7.x
  • react-router-dom 5.x
  • redux 4.x
  • antd 4
  • axios
  • moment 2.24 (日期格式化)
  • qs

项目视图说明

  • 首页
  • 主题详情
  • 用户列表
  • 用户详情
  • 关于

配置按需加载

https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

$ yarn add react-app-rewired customize-cra

高级配置#

这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置，而且上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

$ yarn add react-app-rewired customize-cra
/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {// do stuff with the webpack config...return config;
};

使用 babel-plugin-import#

注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

  // src/App.jsimport React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';import './App.css';class App extends Component {render() {return (<div className="App"><Button type="primary">Button</Button></div>);}}export default App;

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

自定义主题#

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。

$ npm install less@3.9.0 less-loader@4.1.0 --save-dev
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',
-   style: 'css',
+   style: true,}),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

你也可以使用 craco 和 craco-antd 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。

* react hooks 中的state使用

+   import { useSelector } from 'react-redux'
+   console.log(useSelector(state => state));
+   console.log(useSelector(state => state.topic));+ // 获取search
+ import qs from 'qs';
+ const { search } = useLocation();
+ const { tab } = qs.parse(search.substr(1))

获取地址栏id参数

import { useParams } from 'react-router-dom';
let { id } = useParams()

获取history对象,返回上一页

import { useHistory } from 'react-router-dom';let history = useHistory()
afterClose={()=>{history.goBack()
}}

配置页面整体布局和响应式处理方案

配置通用头部+Footer底部
组件基于bootstrap的响应式处理

列表实现

获取异步数据

如何获取异步数据,hooks写法与之前有何不同
数据和reducer进行关联

let getData = useTopicsList()
let {search} = useLocation()
let {tab, page} = qs.parse(search.substr(1));
useEffect(() => {// 调接口
getData(tab, page)
}, [tab, page]);
// ....function useTopicsList() {const dispatch = useDispatch()return function (tab = "dev", page = 1, limit = 20, mdrender = false) {dispatch({type: 'topics_loading',})http.get(`/topics?tab=${tab}&page=${page}&limit=${limit}&mdrender=${mdrender}`).then(res => {dispatch({// 存入state的数据type: 'topics_loadover',data: res.data.data})})}
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

moment转日期格式

dayjs处理时间
https://dayjs.fenxianglu.cn/category/display.html#%E6%A0%BC%E5%BC%8F%E5%8C%96

import dayjs from 'dayjs';
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
require('dayjs/locale/zh-cn')
dayjs.locale('zh-cn'){/* 日期内容 */}{/* 返回现在到当前实例的相对时间。 */}{dayjs(last_reply_at).fromNow()}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

分页

获取分类,点击分页时,修改地址栏参数(关联)
Pagination组件

import React from "react";
import { Pagination } from 'antd'
import { Link, useLocation } from 'react-router-dom'
import qs from 'qs'// 获取分类,点击分页时,修改地址栏参数(关联)
export default function IndexPagination() {// 通过qs获取分类let { search } = useLocation();let { tab = "all", page = 1 } = qs.parse(search.substr(1));return <div className="index-pagination"><PaginationdefaultCurrent={page}defaultPageSize={20}total={1000}showSizeChanger={false}itemRender={(page, type) => {switch (type) {case 'page':return <Link to={`/?tab=${tab}&page=${page}`}>{page}</Link>case 'prev':return <Link to={`/?tab=${tab}&page=${page}`}> {"<"} </Link>case 'next':return <Link to={`/?tab=${tab}&page=${page}`}> {">"}</Link>default:return <Link to={`/?tab=${tab}&page=${page}`}> {"..."}</Link>}}}/></div>
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

详情

封装时间组件

import dayjs from 'dayjs';
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
require('dayjs/locale/zh-cn')
dayjs.locale('zh-cn')// 处理时间的组件
export default function FromNow(props){let {date} = propsreturn dayjs(date).fromNow()
}

使用

<FromNow date={create_at}/>
<FromNow date={last_reply_at}/>

评论列表组件

import React from 'react'
import {Avatar, Card, List, Comment} from "antd";
import {UserOutlined} from "@ant-design/icons";
import FromNow from "../../components/FromNow";
import {Link} from "react-router-dom";export default function Replies(props) {let {data=[], loading} = propsreturn <Cardtitle="评论列表"loading={loading}id='replies'><ListdataSource={data}renderItem={(itemData) => {// console.log(itemData)return <List.Item><Commentauthor={<Link to={`/user/${itemData.author.loginname}`}>{itemData.author.loginname}</Link>}avatar={<Avataricon={<UserOutlined/>}src={itemData.author.avatar_url}title={itemData.author.loginname}/>}content={<divdangerouslySetInnerHTML={{__html: itemData.content}}/>}datetime={<time>发布于: <FromNow data={itemData.create_at}/></time>}/></List.Item>}}pagination={{simple: true}}/></Card>
}

引用组件

  • <Replies data={data.replies} loading={loading}/>
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

用户详情

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<TopicList loading={loading} data={recent_topics} />

这篇关于基于Antd4 和React-hooks的项目开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/522077。

相关文章

C语言小项目实战之通讯录功能

C语言小项目实战之通讯录功能

《C语言小项目实战之通讯录功能》：本文主要介绍如何设计和实现一个简单的通讯录管理系统,包括联系人信息的存储、增加、删除、查找、修改和排序等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录功能介绍：添加联系人模块显示联系人模块删除联系人模块查找联系人模块修改联系人模块排序联系人模块源代码如下
阅读更多...
SpringBoot项目中Maven剔除无用Jar引用的最佳实践

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
基于Python开发电脑定时关机工具

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”，帮你按时关掉电脑，而且全程不需要你多做
阅读更多...
Java中的Opencv简介与开发环境部署方法

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j
阅读更多...
Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ
阅读更多...
SpringBoot项目启动后自动加载系统配置的多种实现方式

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》：本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式：2. 使用 ApplicationRunne
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2