基于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} />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Panoply查看nc文件的时间维

打开的是全球灌溉农田灌溉用水量遥感估算数据集&#xff08;2011-2018&#xff09;&#xff0c;该文件以nc格式储存。nc格式文件就是一个多维的数据库。经纬度占了两维&#xff0c;可能还有时间维度&#xff0c;就是时空谱。 双击打开刚打开时只能看到2018年1月的灌溉数据 打…

软件测试真的看不到前途吗?

看到这个问题和问题后的说明&#xff0c;题主的显性问题就有两个&#xff1a; 1、软件测试有没有前途 2、若从事没有前途的测试&#xff0c;该怎么办&#xff08;真的只能转行么&#xff09;&#xff1f; 一、软件测试有没有前途&#xff1f; 先说结论&#xff1a;如果在2020年…

C++刷题 -- 字符串

C刷题 – 字符串 文章目录 C刷题 -- 字符串1.重复的子字符串 1.重复的子字符串 https://leetcode.cn/problems/repeated-substring-pattern/submissions/490209402/ 暴力解法 第一个for循环用来标定子串的末尾&#xff0c;根据末尾取出子串 第二个while循环用来检查原字符串是…

我在代码随想录|写代码Day6之 454.四数相加II ,三数之和

第一题: 454.四数相加II 题目 解答思路 我们要四数相加等于0一般的思路是暴力破解直接4个for循环,然后通过4个for循环得到答案, 但是这样的时间复杂度是O(n4),会超时然后我们通过将循环拆分,比如将 代码 第二题 : 题目: 代码 class Solution { public:vector<vector<…

后台管理项目多数据源管理方案实战

后台管理项目多数据源管理方案实战 整个权益商城后台本质上是一个访问频率比较低的CRUD管理系统&#xff0c;所以本身不需要考虑微服务拆分的事情。接入微服务体系也只是为了能够调用其他的微服务。 但是&#xff0c;在做电商管理项目时&#xff0c;我们为了简化业务流程&…

图书管理系统jsp + servlet+mysql

图书管理系统 项目使用jsp servletmysql实现&#xff1b; 登陆注册 首页 首页显示图书信息 图书管理 1添加书籍 2查询书籍 3预览书籍 4修改书籍 用户管理 1查询用户 2修改用户 3 删除用户 链接&#xff1a;https://pan.baidu.com/s/1QXK--ypb6OadbmKFlc0jUQ

【Deformable DETR】

最近学习CV中的Transformer有感而发,网上关于Deformable DETR通俗的帖子不是很多,因此想分享一下最近学习的内容。第一次发帖经验不足,文章内可能有许多错误或不恰之处欢迎批评指正。 Abstract DETR消除了目标检任务中的手工设计痕迹,但是存在收敛慢以及Transformer的自注…

macOS系统下载百度网盘的操作流程

第一步 进入百度网盘的官网&#xff0c;链接&#xff1a;百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全​​​​​​​&#xff0c;选择“客户端下载” 第二步 根据自己的电脑配置选择版本进行下载。芯片的查看路径是系统设置-通用-关于本机 第三步 点击右上角的图标…

自监督学习综述

1.简介 其实自监督学习的核心思想很简单&#xff0c;利用大量的无标签数据训练模型&#xff0c;然后将其作为预训练模型在下游任务上进行微调&#xff08;有标签&#xff09;。在用无标签图像训练模型时主要通过设计辅助任务&#xff0c;用图像自身的信息作为标签训练。常见的…

linux存储管理

固态硬盘SSD SSD的优势 SSD采用电子存储介质进行数据存储和读取的一种技术&#xff0c;拥有极高的存储性能&#xff0c;被认为是存储技术发展的未来新星。 内存直接当成硬盘使用 与传统硬盘相比&#xff0c;SSD固态电子盘具有以下优点 第一&#xff0c;SSD完全的半导体化&…

go语言函数二、init函数定义与作用

go语言init函数定义与作用 在go语言中&#xff0c;每一个源文件都可以包含一个init函数&#xff0c;这个函数会在main函数执行前&#xff0c;被go运行框架调用&#xff0c;注意是在main函数执行前。 package main import ("fmt" )func init() {fmt.Println("i…

实战案例:缓存不一致问题的解决(redis+本地缓存caffine)

一.问题引入 目前在写项目的时候&#xff0c;在B端查看文章&#xff0c;A端修改文章。为了增加效率&#xff0c;以及防止堆内存溢出&#xff0c;在B端选择本地缓存文章的方案。但是目前出现了A端对文章修改之后&#xff0c;B端读的还是旧数据&#xff0c;出现了缓存不一致的问…

阿赵UE学习笔记——2、新建项目和项目设置

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。继续来学习虚幻引擎的使用。这次介绍一下新建项目和项目设置。 一、新建项目 通过桌面快捷方式&#xff0c;或者EPIC Games Loader&#xff0c;启动虚幻引擎。 启动完成后&#xff0c;会打开项目管理的界面&#xff0c;可以看…

C++共享和保护——(5)编译预处理命令

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 耕耘者的汗水是哺育种子成长的乳汁&am…

超结MOS/低压MOS在5G基站电源上的应用-REASUNOS瑞森半导体

一、前言 5G基站是5G网络的核心设备&#xff0c;实现有线通信网络与无线终端之间的无线信号传输&#xff0c;5G基站主要分为宏基站和小基站。5G基站由于通信设备功耗大&#xff0c;采用由电源插座、交直流配电、防雷器、整流模块和监控模块组成的电气柜。所以顾名思义&#xf…

vue中的侦听器和组件之间的通信

目录 一、侦听器 监听基本数据类型&#xff1a; 监听引用数据类型&#xff1a; 计算属性和watch区别&#xff1f; 二、组件通信/传值方式 1.父子组件传值 父组件给子组件传值&#xff1a; &#xff08;1&#xff09;props &#xff08;2&#xff09;provide inject &…

玩转大数据20:大数据应用容器化与部署实践

一、容器化技术介绍和优势 随着云计算的快速发展&#xff0c;容器化技术作为一种轻量级虚拟化技术&#xff0c;已经成为应用部署的主要方式。容器化技术通过共享操作系统&#xff0c;将应用程序及其依赖项打包成一个独立的、可移植的容器&#xff0c;从而实现应用的快速部署和…

Android Studio: 解决Gradle sync failed 错误

文章目录 1. 前言2. 错误情况3. 解决办法3.1 获取gradle下载地址3.2 获取gradle存放目录3.3 替换并删除临时文件3.4 触发Try Again 4. 执行成功 1. 前言 今天调试项目&#xff0c;发现新装的AS&#xff0c;在下载gradle的过程中&#xff0c;一直显示连接失败&#xff0c;Gradl…

构建陪诊预约系统:技术实战指南

在医疗科技的飞速发展中&#xff0c;陪诊预约系统的应用为患者和陪诊人员提供了更为便捷和贴心的服务。本文将带领您通过技术实现&#xff0c;构建一个简单而实用的陪诊预约系统&#xff0c;以提升医疗服务的效率和用户体验。 技术栈选择 在开始之前&#xff0c;我们需要选择…

AUTOSAR CanTSyn模块配置与代码实现(二)

AUTOSAR CanTSyn模块配置与代码实现 1、FUP message处理 CanTSyn_process_FUP_message 先比较和SYNC报文的Sequence是否相等&#xff0c;如果不相等则不接受该报文。 然后调用CanTSyn_unpack_store_fup处理fup报文。 获取接收到FUP时的本地时间&#xff0c;并与接收到的SYNC…