react+ts实现简单jira项目的最佳实践记录

原文

练手的一套项目
react ts
虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼
项目代码：https://gitee.com/fine509/react_jiar

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这是三个主要页面，还有一些小细节

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
等等

一些值得注意的地方（只是讲大概的功能，没有具体的详解怎么用）

在这里插入图片描述

使用错误边界处理，getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。

useSearchParams的使用

在这里插入图片描述
在这里插入图片描述

这个api可以获取和设置我们这里的params。

react-query的使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这个库网上对他的介绍是用来管理服务端数据的状态管理库，他好像有点类似于redux，但是不用编写很多的actions,reducer，支持异步请求，用key唯一标识数据，存在一个类似于全局状态管理库的地方。特别适合用于某些表格，比如增删改改查这些，而且也很支持乐观更新。 思路就是 比如增删改查，再发送数据的那一刻直接拿到原来的数据，通过自己编写的逻辑代码，获取到增删改查后的数据，然后直接渲染到页面，看上去就像是直接更新了一样，实际上是先渲染，后台再自己发送请求，当失败的时候，你也可以拿到原始的数据然后重新渲染到页面去，再提示失败。 最后就是我做这个项目特别纠结的一点，数据的管理。

我首先是自己封装了一个hooks。

在这里插入图片描述

我的思路是，一个页面可能要获取很多数据，那么Loading这些如果自己写很麻烦，还有多个，为什么loading不能统一管理呢，然后data就设为一个对象，在使用的时候你可以传一个类型过来定义你这个data的类型

在这里插入图片描述

然后sendHttp用来发送数据

在这里插入图片描述

接受两个参数，第二个参数是当前的数据要放在data的哪个属性上，

使用效果就是

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这样就可以统一管理这些数据的状态，但后面发现用起来也是很麻烦。所以我又放弃了，还是原生的写起来舒服啊
直接定义接口

在这里插入图片描述

直接使用

在这里插入图片描述

害，当然我也想到用redux，但是redux很多都要编写action，reducer这些，也是很繁琐。
最近听朋友说ahooks的usequest也不错，下个项目试试。

最后这个项目学到最多的就是封装各种hooks

封装redux的


在这里插入图片描述

封装请求的

在这里插入图片描述

还有就是ts的学习，

看到不懂得api就直接类型定义点进去

在这里插入图片描述

像这种不懂就点进去，一个一个点击去

在这里插入图片描述

在这种狂轰乱炸的情况下，会慢慢了解泛型的使用

到此这篇关于react ts实现简单jira项目的文章就介绍到这了,更多相关react ts jira项目内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！

react+ts实现简单jira项目的最佳实践记录的更多相关文章

  1. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗？

  2. ios – React Native – 在异步操作后导航

    我正在使用ReactNative和Redux开发移动应用程序,我正面临着软件设计问题.我想调用RESTAPI进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是：我应该把逻辑导航到主视图？我可以直接从动作访问导航器对象并在那里执行导航吗？.我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点？

  3. 在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么？

    我已经挖掘了很多帖子试图使用cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.什么是使用反应原生的可可豆荚的正确方法？在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode8.2.1.这是我的过程,好奇我可能会出错：1)

  4. ios – React Native WebView滚动行为无法按预期工作

    如何确保滚动事件的行为与ReactNative应用程序中的浏览器相同？

  5. ios – React Native – BVLinearGradient – 找不到’React/RCTViewManager.h’文件

    谢谢.解决方法几天前我遇到了完全相同的问题.问题是在构建应用程序时React尚未链接.试试这个：转到Product=>Scheme=>管理方案…=>点击你的应用程序Scheme,然后点击Edit=>转到Build选项卡=>取消选中ParallelizeBuild然后点击标志添加目标=>搜索React,选择第一个名为React的目标,然后单击Add然后在目标列表中选择React并将其向上拖动到该列表中的第一个.然后转到Product=>再次清理并构建项目.这应该有所帮助.

  6. ios – React Native – NSNumber无法转换为NSString

    解决方法在你的fontWeight()函数中也许变成：

  7. ios – React native error – react-native-xcode.sh:line 45：react-native：command not found命令/ bin/sh失败,退出代码127

    尝试构建任何(新的或旧的)项目时出现此错误.我的节点是版本4.2.1,react-native是版本0.1.7.我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过xcode构建任何项目.解决方法要解决此问题,请使用以下步骤：>使用节点版本v4.2.1>cd进入[你的应用]/node_modules/react-native/packager>$sh./packager.s

  8. 反应原生 – 如何通过Xcode构建React Native iOS应用程序到设备？

    我试图将AwesomeProject应用程序构建到设备上.构建成功并启动屏幕显示,但后来我看到一个红色的“无法连接到开发服务器”屏幕.它表示“确保节点服务器正在运行–从Reactroot运行”npmstart“.看起来节点服务器已经运行,因为当我做npm启动时,我收到一个EADDRINUSE消息,表示该端口已经在使用.解决方法从设备访问开发服务器您可以使用开发服务器快速迭代设备.要做到这一点,你的

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. 如何为iOS的React Native设置分析

    所以我已经完成了一个针对iOS的ReactNative项目,但是我想在其中分析.我尝试了react-native-google-analytics软件包,但是问题阻止了它的正常工作.此外,react-native-cordova-plugin软件包只适用于Android,因此插入Cordova插件进行分析的能力现在已成为问题.我也没有Swift/ObjectiveC的经验,所以将完全失去GA的插入.有没有人有任何建议如何连接GoogleAnalytics的ReactNativeforiOS？

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部