![](https://img-blog.csdnimg.cn/0229084f81914b83a94acfc12d608beb.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 53
React
.ToString()°
这个作者很懒,什么都没留下…
展开
-
React中memo(),useMemo(),useCallback()的使用(区别,解决了什么问题)
React中memo(),useMemo(),useCallback()的使用前言:React框架中,当组件的props或state发生变化时,会重新渲染组件,实际开发中会遇到不必要的重新渲染场景。这里的memo(),useMemo(),useCallback()都是应用在函数组件中。调理不够清楚,希望你能够一步一步看。React.memo()React.memo()和类组件中React.PureComponent()很相似,它可以帮助我们控制什么时候重新渲染组件,它适用于函数组件,但不适用于 cla原创 2022-05-09 17:57:24 · 940 阅读 · 1 评论 -
React 脚手架在IIS上进行部署
React 脚手架在IIS上进行部署利用react脚手架生成一个初始的项目我们需要先执行下面命令安装脚手架npm install -g create-react-app利用脚手架创建React项目执行以下命令进行项目创建 其中 project 为项目名称,会在当前目录下创建该文件夹并生成项目文件,执行完之后就直接可以进入目录启动项目create-react-app project启动React项目切换到项目文件夹 cd project 并启动项目 npm start.项目原创 2022-01-25 22:02:59 · 1632 阅读 · 0 评论 -
富文本编辑器之wangEditor
富文本编辑器之wangEditor在公司做项目时,遇到了需要富文本编辑器能够上传图片到服务器,上网找了一些,发现了一个国内开源的富文本编辑器----wangEditor,由于是国内的,文档介绍比较清楚,个人认为上手起来也很方便。如果工作上你有类似需求,不妨可以去官网看看,官网地址由于现在做的项目前端用的是React,这个编辑器完全支持React ,同时也支持Vue。官网所说:快速接入,配置简单,几行代码即可生成。集成了所有常见功能,无需二次开发。在 Vue React 也可以快速接入。我是参看该编译器原创 2022-01-24 21:50:52 · 782 阅读 · 0 评论 -
实现Ant Design Tree组件的节点的增删改
实现Ant Design Tree组件的节点的增删改在做项目时最近遇到一个需求,需要用到Antd中的tree,并能够实现对tree的节点的增加和删除,以及节点名称的修改。去翻Antd官网文档,发现tree组件并没有提供关于节点操作的api,但是有鼠标右击的api。借助这个鼠标右击,以及其他组件是可以实现对节点的增删改。下面进行截图介绍:截图介绍第一部分:Tree组件最外层节点只能增加子节点父节点可以增加子节点,修改自己的节点名称,删除节点3.最内层节点不允许再添加子节点,只允许修改自己的原创 2022-01-05 21:47:11 · 6103 阅读 · 3 评论 -
React图片懒加载和路由懒加载的简单介绍
React图片懒加载和路由懒加载的使用1. 路由懒加载路由懒加载实现代码分隔,可以将代码拆分视为增量下载应用程序。安装:npm install @loadable/component 使用:import loadable from '@loadable/component'const LoadDemoComponent = loadable(() => import('./components/Demo.jsx'))function App() { return (原创 2021-12-29 22:16:51 · 608 阅读 · 0 评论 -
React Router V6变更介绍
React Router V6 变更介绍之前一直在用5.x版本的Router,突然发现Router V6有一些变化,可以说是对嵌套路由更加友好了。这里,我们就做个简单的介绍。1. < Switch > 重命名为< Routes >之前在用Router时,需要用Switch包裹,Switch可以提高路由匹配效率(单一匹配) 。在V6中,该顶级组件将被重命名为Routes,注意的是其功能大部分保持不变。2. < Route >的新特性变更component/ren原创 2021-12-22 23:06:28 · 708 阅读 · 2 评论 -
React Hooks的万字介绍,想了解Hooks,看这篇就够了
文章目录Hooks的简单了解为什么要学HooksuseState简单介绍useEffect简单介绍1. 基本使用Hooks的简单了解从功能上看:类组件约=函数组件+hooks在React API中,凡事use开头的都是Hooks,比如:useState、useEffect、useCallback、useContext为什么要学Hooks之前存在的问题: 1. 类组件:生命周期难以理解,更难熟练运用2. 复用状态的render-props和高阶组件思想理解起来不容易3. 最火的状态管理方原创 2021-12-16 22:10:41 · 333 阅读 · 0 评论 -
React 版本的真开箱即用的富文本编辑器wysiwyg
React 版本的真开箱即用的富文本编辑器这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg,第一时间你可能觉得这个名字起的很烂,很难记,但是当你知道它的全称后就很好记了,全称为 What you see is what you get(所见即所得)。这个富文本编辑器是偶然在掘金上看到的,宣传上主打开箱即用,在用过后,确实基本能做到开箱即用,基本下载后,不需要进行什么配置。Github文档地址官方Demo地址import React, { Component } from 'react原创 2021-11-29 22:28:39 · 625 阅读 · 0 评论 -
利用React+Ant Design 的Upload组件进行封装的上传多个图片的照片墙组件
利用React+Ant Design 的Upload组件进行封装的上传多个图片的照片墙组件Antd 提供了对文件上传的Upload组件,个人感觉还是非常好用的。在公司里,如果使用了Antd,那么Upload必定是要封装成一个单独的组件的。下面的代码是对Upload组件进行的封装,自认为注释已经比较全了。后面也有如何调用这个组件获取到上传后的服务器返回的图片名称。Antd Upload组件官方指引直接上代码,这里是封装的Upload组件://将图片加工成base64编码形式function get原创 2021-11-29 22:24:51 · 1282 阅读 · 0 评论 -
React+AntDesign结合Table、Modal+Form的使用,以及Ant Design 4.x Modal + Form搭配使用时,如何在Modal中使用表单验证
React+AntDesign结合Table、Modal+Form的使用最近写React + AntDesign时,使用到Modal和Form组件时候,因为Modal组件自带onOk按钮,因此不能使用Form自带的onFinish函数进行表单验证,查了查资料,大致了解是通过使用 ref 的方式获得表单值甚至可以发起表单校验方法。不多说了,直接上代码。export default class App extends Component { formRef=React.createRef(); s原创 2021-11-23 23:21:13 · 1264 阅读 · 0 评论 -
使用React Antd框架时,出现Modal里加form表单,用ref回显数据,第一次取到的是null
使用React Antd框架时,出现Modal里加form表单,用ref回显数据,第一次取到的是null在react项目里,使用ui框架ant-design。table列表的每一行都有编辑按钮,点击编辑,弹窗Modal出现,里面使用Form表单,然后用ref回显数据。但是发现第一次取的时候,ref取到的current总是null,关闭再次打开就可以正常取到。这里的解决方法是:Modal组件中有一个属性为强制渲染给Modal加上此属性即可forceRender="true"...原创 2021-11-23 22:53:05 · 1751 阅读 · 3 评论 -
React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值
React + Ant Design 4.X版本表单Form数据回显、重置表单、获取表单某一项的值、获取整个表单的值由于 4.x版本弃用了3.x中的Form.create()高阶函数,这里我们使用ref。下面的是使用以前老的ref的声明,以及使用,这里只是作为展示,不推荐使用。给From表单添加ref属性,假设这里设置的ref=“addForm”在满足条件的时候,通过下列方法做不同的事①表单数据回显(设置值)this.refs.addForm.setFieldsValue({name: ‘xxxx原创 2021-11-23 22:23:50 · 4718 阅读 · 0 评论 -
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within `render`)错误
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within render).Render methods should be a pure function of props and state.错误这个错误是最近在使用this.props.history.replace()方法进行路由跳转,跳转之后,在控制台会产生这个错误,但对实际功能并没有影响。但是有着控制台不能有警告和错误的强迫症迫使我,仔细上网原创 2021-11-22 22:16:18 · 1071 阅读 · 0 评论 -
npm run eject命令
npm run eject命令如果熟悉webpack的小伙伴,知道package.json中的配置会很多,而react脚手架中的package.json中,依赖为什么这么少。这是因为像webpack,babel等等都是被creat react app封装到了react-scripts这个项目当中,包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的。npm run eject,会将原本creat react app对webpack,babel等相关配置的封装弹射出来,如果我原创 2021-11-18 21:34:32 · 3366 阅读 · 0 评论 -
React脚手架中使用装饰器报Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled错误
Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled 错误我在使用装饰器语法对react-redux中connect()方法使用进行简化的时候发现,我们利用create-react-app脚手架搭建的react脚手架项目直接使用装饰器会报"Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled"的错原创 2021-11-18 21:15:55 · 1897 阅读 · 0 评论