分类：React

2021
03-24

React State状态与生命周期的实现方法

React State状态与生命周期的实现方法 一、实现组件的方法:组件名称首字母必须大写1.通过JS函数方式实现组件<divid="app"></div><scripttype="text/babel">varReactDiv=document.getElementById('app');functionGetReactComp(){return<p>我是react组件</p>}consthellocomp=<GetReactComp/>//首字母大写constreactSpan=(<span>{hellocomp}</span>)ReactDOM.render(reactSpan,ReactDiv)</script>2.通过ES6class实现... 继续阅读 >
2021
03-15

React中setState的使用与同步异步的使用

在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过this.setState来对组件的属性进行修改。1、this.setState的两种定义方式定义初始状态state={count:0},如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法(1)传递对象this.setState({count:this.state.count+1})(2)传递函数this.setState((state,props)=>({count:count+1}))2、setState的两种方式有什么不同?如果变更... 继续阅读 >
2021
02-21

react项目从新建到部署的实现示例

开展新项目本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。项目选型react脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几点进行对比最终选择了比较贴合项目的umi。易用性，开箱即用。umi内置了许多功能，可是也带来很多限制，譬如对项目结构的规定提供自己生态的插件需要学习成本，cra初始化简洁选取模板即可开始，不需要额外的学习成本（即使vue玩家过来也没负担）。... 继续阅读 >
2021
02-20

详解React中共享组件逻辑的三种方式

废话少说，这三种方式分别是：renderprops、高阶组件和自定义Hook。下面依次演示假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间，像这样：constTimeOnPage=()=>{const[second,setSecond]=useState(0);useEffect(()=>{setTimeout(()=>{setSecond(second+1);},1000);},[second]);return(<div>停留时间：{second}秒</div>);}如果另一个组件需要复用这个功能，我们能否封装一下，以便... 继续阅读 >
2020
12-26

React中使用Vditor自定义图片详解

React中使用Vditor自定义图片详解 安装npminstallvditor-s引用导入依赖包importVditorfrom"vditor";导入样式import"vditor/src/assets/scss/index.scss";使用示例exportdefaultclassVditorextendsComponent{constructor(props){super(props);this.state={editValue:""};}componentDidMount=()=>{//组件挂载完成之后调用注意一定要在组件挂载完成之后调用否则会找不到注入的DOMthis.createVidtor({value:this.state.ed... 继续阅读 >
2020
12-10

react中hook介绍以及使用教程

前言最近由于公司的项目开发，就学习了在react关于hook的使用，对其有个基本的认识以及如何在项目中去应用hook。在这篇博客中主要从以下的几个点进行介绍：hook简介hook中常用api的使用hook在使用过程中需要去注意的地方hook中怎样去实现class组件中的声明周期函数hook首先介绍关于hook的含义，以及其所要去面对的一些场景含义：Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的... 继续阅读 >
2020
11-29

详解React路由传参方法汇总记录

详解React路由传参方法汇总记录 React中传参方式有很多，通过路由传参的方式也是必不可少的一种。本文记录项目中会用到的路由传参方式：路由跳转传参API+目标路由获取参数的方式。一、动态路由跳转方法Link<Linkto={{pathname:"/user/add/1"}}>跳转新增页面</Link>history.pushthis.props.history.push("/user/add/1");获参方法this.props.match.params二、路由query显示参数Link跳转<Linkto={{pathname:"/user/add",query:{id:1}}}>跳转... 继续阅读 >
2020
11-03

React Native登录之指纹登录篇的示例代码

React Native登录之指纹登录篇的示例代码 ReactNative登录之指纹登录篇，具体内容如下所示：最近在做react-native的APP，项目登录使用了普通账号密码登录、短信登录、手势登陆、指纹登录和人脸识别登录五种方式，所以准备做一个登录方式的合集。本篇是指纹登录篇，通过手机调用指纹传感器来获取用户指纹并做校验，校验成功则自动登录。首先展示我们最后达成的成果，毕竟无图无真相，下方是真机录屏gif：分析下gif所展示的功能点：1，通过点击操作选项来弹出指纹识别界面，... 继续阅读 >
2020
11-03

React Ant Design树形表格的复杂增删改操作

React Ant Design树形表格的复杂增删改操作 最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。树形表格的显示在antd中对于表格的key值有着严格的控制，每一个row都必须有一个独一无二的key值，可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的... 继续阅读 >
2020
11-03

react+antd 递归实现树状目录操作

1.写在前面作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~2.数据后台传过来的数据大概是这样的{"data":[{"id":1,"name":"一级节点","parentId":0,"isValid":true,"canAddChild":true,"parent":null,"children":[]},{"id":3,"name":"二级节点","parentId":1,"isValid":true,"canAddChild":true,"parent":null,"chi... 继续阅读 >
2020
11-01

react ant Design手动设置表单的值操作

react ant Design手动设置表单的值操作 1.设置表单的值this.props.form.setFieldsValue({name:"张三",});2.清空表单的值this.props.form.resetFields();3.获取某一输入框的值this.props.form.getFieldValue('newPassword');4.获取整个表单的值this.props.form.getFieldsValue();多看官方文档就知道这些东西了补充知识：react使用antd表单赋值，用于修改弹框1、使用getFieldDecorator的initialValue2、在state里定义一个变量存表格的数据3、给打开弹框的方法传个record4... 继续阅读 >
2020
10-30

react使用antd表单赋值,用于修改弹框的操作

react使用antd表单赋值,用于修改弹框的操作 1、使用getFieldDecorator的initialValue2、在state里定义一个变量存表格的数据3、给打开弹框的方法传个record4、把表格里的值存到state5、把在state里存的值传给弹框6、获取传过来的值7、在取消方法和修改成功后中给赋空值，要不然，点击添加的方法表单里面会有值7、OK补充知识：react中使用antd的表单重置数据resetFields重置一组输入控件的值（为initialValue）与状态，如不传入参数，则重置所有组件Function([names:string... 继续阅读 >
2020
10-30

react antd表格中渲染一张或多张图片的实例

react antd表格中渲染一张或多张图片的实例 使用antdtable中显示一张图片，代码如下：constcolumns=[{title:"姓名",dataIndex:"name",width:100,//table列定宽可不设fixed:"left"//固定列的位置},{title:"联系电话",width:150,dataIndex:"phone"},{title:"显示一张图片",width:150，dataIndex:"img"，render：(text)=><imgsrc={text}/>},{title:"显示多张图片",width:400，dataIndex:"imgs"，render:text=>{//text是后端传的... 继续阅读 >
2020
10-28

在react项目中使用antd的form组件,动态设置input框的值

在react项目中使用antd的form组件,动态设置input框的值 问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。解决办法：不使用initialValue设置动态更新的值，而是使用this.props.form.setFieldValue({name:data});用于动态更新值，就可以解决了。... 继续阅读 >
2020
10-18

详解如何使用React Hooks请求数据并渲染

前言在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用ReactClass组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook... 继续阅读 >