文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Hooks + TS 搭建一个任务管理系统（一）-- 登录注册页面

第二个状态是错误状态，用来接收登录页面的错误信息，当有错误发生时，都会丢到这个变量当中 // 标识当前是注册还是登录，false 表示当前是登录状态 const [isRegister, setIsRegister...dispatch(...args) : void 0), [dispatch, mountedRef]) } 当我们使用这个 hook 时，将会接收到当前组件的状态，当组件被卸载后，我们就不需要再将数据返回了...，我需要使用 then 中的第二个参数来接收这 错误对象，再返回这个错误，才能使用 catch 获取，正常情况下，catch 获取不到这个错误 // run是主入口，触发异步请求 // 采用useCallback...处理缓存，利用 context 来实现数据共享 export const useAuth = () => { // 由于在使用 context 时，需要在子节点中声明一下这个 context...，当 error 时，展示一个错误提示框 // 当组件挂载时，初始化 user useMount(() => { run(bootstrapUser()) }) 在组件刚挂载时

1.7K11
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    react项目打包优化

    它里面讲到了为什么要使用按需加载：如果我们在使用一个组件的时候，默认是没有样式的，需要把样式也引用进来才会生效。...但是如果你在使用 antd 的时候，用的组件并不多，可是却引入了全部的样式，所以会导致打包出来的文件特别的大。怎么解决呢？如果你使用了 antd ，那么官网上面已经有了很好的说明。...antd 官网上面有这样的一段说明 注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。...所以，在你使用 import { Button } from 'antd'; 这种语法的时候可以不用这个插件。...路由懒加载 使用react开发一般使用的路由模块都是react-router-dom这个插件。当然，如果你使用其他的插件，我想应该也是可以的，不过具体的用法可能需要你自己探索。

    3.9K30

    react脚手架（create-react-app）配置antd中css按需加载的坑

    前不久写了一篇关于react脚手架（create-react-app）配置antd中css按需加载的踩坑记录，文章内容有误，原文如下react脚手架（create-react-app）配置antd中css...满脑子疑问，这里其实错的不是我们，也不是antd，而是这个脚手架，它默认是不使用.babelrc的，它使用的是package.json中的babel配置和内部配置。...上一篇错误文章我们在这里出错后就去修改node_modules了，这是绝对不能做的。 6、所以我们要将脚手架的内部配置项暴露出来进行修改，使用 npm run eject这个命令来暴露配置。...10、还没有完，此时如果运行项目，浏览器还会报错（天了噜，真tm想弃用....)为什么会报错呢？...因为上面一步开启了使用.babelrc文件，但是.babelrc的配置不正确，我们需要修改（为什么不正确呢？

    4K21

    从零搭建基于react与ts的组件库（一）项目搭建与封装antd组件

    为什么会有这样一篇文章？因为网上的教程/示例只说了怎么做，没有系统详细的介绍引入这些依赖、为什么要这样配置，甚至有些文章还是错的！...迫于技术洁癖，我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节，做到面对对于工程出现的错误能够做到有把握。 最近使用阿里低开引擎的时候，想要封装一套组件库作为物料给低开引擎引入。...引入antd组件库作为底层原子组件库，并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。...因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。 插件总共分为两种： 当我们添加 语法插件 之后，在解析这一步就使得 babel 能够解析更多的语法。...(顺带一提，babel 内部使用的解析类库叫做 babylon，并非 babel 自行开发) 举个简单的例子，当我们定义或者调用方法时，最后一个参数之后是不允许增加逗号的，如 callFoo(param1

    2K31

    使用 sort-imports 排序规则美化头部 import 代码

    前言 我们在开发一个页面的时候，文件头部总是会有一堆 import 代码，特别是使用 React 技术栈的同学感同身受，随着项目代码的增多，如果不对头部的代码进行分层，会导致代码看起来很冗余，我们需要它按照一定的规则进行排序.../components/ImportFundReceiptListTable' import { get, reduce, toNumber } from 'lodash' import moment..., { Moment } from 'moment' import React, { FC, useState } from 'react' import { Link } from 'react-router-dom...["simple-import-sort"], "rules": { "simple-import-sort/imports": "error", } } 这样我们就配置好了，以后当我们开发页面的时候...' import type { ColumnsType, ColumnType } from 'antd/es/table'; import { get, reduce, toNumber }

    15900

    使用antd表格组件实现日程表

    "> 上述用到的资源文件地址: react-antd-schedule/lib 我们需要把react相关代码写在text/babel标签中，如下所示，我们打印antd和react看看是否有值。...image-20201119161505912 需要注意的是，CDN引入React和antd，他们是在全局暴露了一个对象，在使用它内部的方法时就需要React.xx、antd.xx来访问了。...optRecords[i][key] = {text:"", code:"0"} } setOptRecords(optRecords); } } 当我在浏览器执行看效果时...使用lodash的cloneDeep方法进行深拷贝让其引用地址改变，这样antd就能监听到数据改变，从而触发页面刷新。...JSON.parse进行深拷贝，但是这种深拷贝有个问题：但json数据中有函数时，里面的函数会失效没法执行，由于我需要自定义antd的表格，在json数据中包含了函数，因此我不能使用这个方法。

    4.2K20

    带你了解一些package.json的骚操作

    由简入繁，丰富项目的 package.json 简单版的 package.json 当我们新建一个名称为 my-test 的项目时，使用 yarn init -y 或 npm init -y 命令后，...当我们使用 npm 检索模块时，会对模块中的 description 字段和 keywords 字段进行匹配，写好 package.json中的 description 和 keywords 将有利于增加我们模块的曝光率...安装项目依赖（dependencies & devDependencies） dependencies字段指定了项目运行所依赖的模块（生产环境使用），如 antd、 react、 moment等插件库：...自定义命令（bin） 用过 vue-cli，create-react-app等脚手架的朋友们，不知道你们有没有好奇过，为什么安装这些脚手架后，就可以使用类似 vue create/create-react-app...React 项目相关 设置应用根路径（homepage） 当我们使用 create-react-app 脚手架搭建的 React 项目，默认是使用内置的 webpack 配置，当package.json

    2.5K40

    常用的package.json，还有这么多你不知道的骚技巧

    由简入繁，丰富项目的 package.json 简单版的 package.json 当我们新建一个名称为 my-test 的项目时，使用 yarn init -y 或 npm init -y 命令后，...如果该模块名从未被使用过，则会抛出 404 错误： ? 或者，我们也可以去 npm 上输入模块名，如果搜不到，则可以使用该模块名。...安装项目依赖（dependencies & devDependencies） dependencies字段指定了项目运行所依赖的模块（生产环境使用），如 antd、 react、 moment等插件库：...自定义命令（bin） 用过 vue-cli，create-react-app等脚手架的朋友们，不知道你们有没有好奇过，为什么安装这些脚手架后，就可以使用类似 vue create/create-react-app...React 项目相关 设置应用根路径（homepage） 当我们使用 create-react-app 脚手架搭建的 React 项目，默认是使用内置的 webpack 配置，当package.json

    2.1K30

    Next.js学习

    ) } Color.getInitialProps = async ()=>{     const promise =new Promise(resolve=>{         axios.get...    Router.events.on('routeChangeError',(...args)=>{       console.log('4,routeChangeError->跳转发生错误,参数为...参数为:',...args)     }) 6、模块懒加载 import React, {useState} from 'react' //时间格式化组件 需要下载 import moment from... 'moment' //1.为了优化项目，可以使用Lazy Loading模块懒加载（类似于按需加载 当我们作的应用存在首页打开过慢和某个页面加载过慢时，就可以采用Lazy Loading的形式，用懒加载解决这些问题...import App from 'next/app' import 'antd/dist/antd.css' export default App // 这个文件相当于是一个全局的配置文件 // 然后把

    2.2K30

    带你了解一些package.json的骚操作

    由简入繁，丰富项目的 package.json 简单版的 package.json 当我们新建一个名称为 my-test 的项目时，使用 yarn init -y 或 npm init -y 命令后，在项目目录下会新增一个...当我们使用 npm 检索模块时，会对模块中的 description 字段和 keywords 字段进行匹配，写好 package.json中的 description 和 keywords 将有利于增加我们模块的曝光率...安装项目依赖（dependencies & devDependencies） dependencies字段指定了项目运行所依赖的模块（生产环境使用），如 antd、 react、 moment等插件库：...自定义命令（bin） 用过 vue-cli，create-react-app等脚手架的朋友们，不知道你们有没有好奇过，为什么安装这些脚手架后，就可以使用类似 vue create/create-react-app...React 项目相关 设置应用根路径（homepage） 当我们使用 create-react-app 脚手架搭建的 React 项目，默认是使用内置的 webpack 配置，当package.json

    2.2K50

    React hooks与Faced pattern

    写在开头 去年CTO一直跟我在宣扬faced模式，但是当时没有get到它的点 等我get到的时候，他已经不在我身边工作了，真是一个悲伤的故事 阅读本文前需要先了解的知识点 什么是react hooks...它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,例如: import React, { useState } from 'react'; function...You clicked {count} times setCount(count + 1)}> Click me...外观模式定义了一个高层的接口，让子系统更容易使用。 什么是自定义hooks?...faced模式对外业务使用场景： 用户点击群组内其他人头像 用户点击朋友圈评论区 - 朋友的头像 用户通过名片点击 未来其他的场景...具体业务场景如下图所示: 这样，你或许不仅明白了为什么React

    31520

    package.json 知多少？

    同时， ant-design 也是需要依赖 React 的，它要保持稳定运行所需要的 React 版本是16.0.0，而你开发时依赖的 React 版本是 15.x： 这时，ant-design 要使用..."dependencies": { "react": "15.6.0", "antd": "^3.22.0" } 例如，我在项目中依赖了 antd 的最新版本，然后依赖了 react...目录、文件相关 程序入口 { "main": "lib/index.js", } main 属性可以指定程序的主入口文件，例如，上面 antd 指定的模块入口 lib/index.js ，当我们在代码用引入...antd 时：import { notification } from 'antd'; 实际上引入的就是 lib/index.js 中暴露出去的模块。...darwin" ]，当我在此系统下安装它时会爆出如下错误： ? 在node环境下可以使用 process.platform 来判断操作系统。

    2.1K10

    antd mobile 作者教你写 React 受控组件和非受控组件

    “关注作者：https://www.zhihu.com/column/c_1455925261150105600 ” 曾经，我每次面试时几乎都会问一个问题：antd 中的 Input 组件是受控组件还是非受控组件...而当它处于受控模式时，我们让它的内部状态和 Parent 组件中的状态手动保持同步。...并不可以，React 不允许我们在 render 过程中调用 setState。 似乎进入了死胡同，但我们可以停下来，重新考虑一下这行 useState 的代码： 当我们创建这个 State 时？...forceUpdate 函数： “下图中的虚线浅色圆圈表示 ref，刷新图标表示 forceUpdate 函数 ” 这样一来，我们就可以直接在 render 阶段直接更新 ref 的值了： 再回头看下代码，会发现，为什么还需要判断根据受控和非受控模式来使用不同的值呢...这条 issue 揭示了一个隐藏已久的 bug，举个例子： 假如当前的 state 为 1，如果我们用的是 React 的 useState，那执行 setState(1) 不会有任何效果，React

    2.4K10

    使用React全家桶搭建一个后台管理系统

    在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。...antd(2.10) antd是（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出的一个中台设计语言 Ant Design，使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司，而且我从他们的设计理念也学到了很多关于...react-router(4.x) react-router 4.x和2.x的差异又是特别的大，召唤文档,网上基本上都还是2.x的教程，看过文档之后，反正简而言之其就是要让使用者更容易上手。...fetch-jsonp使用也和fetch类似，代码如下 fetchJsonp(url,{method: 'GET'}) 　　.then((res) =>res.json()) 　　.then((data...typescript 公司大概会在6月份开始，新的项目就要采用ts开发了，所以我也到时会在该项目中引人ts的语法，我现在的感觉是使用ts后，前后端对接会更加轻松，不会有一些类型不匹配的低级错误，而且antd

    2K90

    使用ant design开发完整的后台系统

    这里要说的是ant design的vue版和react版本的使用。这里不考虑到两种框架vue和react的底层。 vue ant design 项目 这是一个测试平台的项目。 ?...推荐使用yarn进行安装~ # 安装脚手架 yarn global add @vue/cli # 初始化项目 vue create antd-demo # 引入vue ant design yarn...' import 'ant-design-vue/dist/antd.less' Vue.use(Antd) 使用axios操作接口。...react ant design 项目 使用react ant design开发的项目是一个信息配置后台系统。 ? 这里直接使用Ant Design Pro开发的。...后话 嗯~ 根据实际情况增加功能，比如图表展示你要选啥实现:echart, bizchart...等等 在使用vue和react版本的ant design开发后台系统，自己还是比较偏向使用react ant

    2.8K20

    详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

    兼容性问题 第三方依赖兼容问题 ・React - 最低 v16.9，部分组件使用 hooks 重构 （ react 升级相关文档：https://sourl.cn/6bM4Ep） ・Less - 最低...将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入 antd4-codemod 上图这类报错是 Icon 组件自动替换错误，有 2 种处理方式...● validateTrigger onBlur 时不再修改选中值，且返回 React 原生的 event 对象。...● validator 在 antd3 时，我们使用 callback 返回报错。但是 antd4 对此做了修改，自定义校验，接收 Promise 作为返回值。...dingWebhook || '', }, }) ); }} 当我们希望通过 validateFields 拿到的数据是数组时，例如这样

    4.9K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券