分类：React

2021
09-10

详解Ref在React中的交叉用法

目录一、首先说明下什么是Ref二、ref在hooks中的用法1、ref在hooks中HTMLDom的用法2、ref在hooks中与函数式组件的用法3、ref在hooks中与类组件一同使用4、ref在hooks中与class、react-redux一同使用一、首先说明下什么是RefRef转发是一项将ref自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的Ref官网说明：点击这里二、ref在hooks中的用... 继续阅读 >
2021
09-10

React+高德地图实时获取经纬度,定位地址

目录1.初始化地图2.地图扎点3.开启定位4.监听地图变化5.获取详细地址6.扎点动画😄7.结束1.根据高德官方的教程进行前期的配置高德地图JSAPI1.4.15文档2.参照官方示例中心完成地图的创建示例中心接下来，首先看效果图：1.初始化地图地图容器创建后，初始化时需要配置一些默认的参数，这里配置了常用的几个，其他的效果自己可以参考api去添加Dom：<divid='map_container'>//地图容器</div>//定义... 继续阅读 >
2021
09-09

React如何优雅的捕获异常

目录前言ErrorBoundaryErrorBoundary之外try/catchwindow.onerror,error事件unhandledrejectionXMLHttpRequest与fetch事件处理程序的异常捕获示例类型定义自定义的CatchError装饰器总结一下下一步写在最后前言人无完人，所以代码总会出错，出错并不可怕，关键是怎么处理。我就想问问大家react的应用的错误怎么捕捉呢？这个时候：小白+++：怎么处理？小白++：ErrorBoundary小白+：ErrorBoundary,trycatch... 继续阅读 >
2021
09-09

React如何优雅的捕获异常

目录前言ErrorBoundaryErrorBoundary之外try/catchwindow.onerror,error事件unhandledrejectionXMLHttpRequest与fetch事件处理程序的异常捕获示例类型定义自定义的CatchError装饰器总结一下下一步写在最后前言人无完人，所以代码总会出错，出错并不可怕，关键是怎么处理。我就想问问大家react的应用的错误怎么捕捉呢？这个时候：小白+++：怎么处理？小白++：ErrorBoundary小白+：ErrorBoundary,trycatch... 继续阅读 >
2021
09-04

React星星评分组件的实现

React星星评分组件的实现 实现的需求为传入对商品的评分数据，页面显示对应的星星个数。1.准备三张对应不同评分的星星图片2.期望实现的效果这样的调用<StarScorescore={data.wm_poi_score}/>3.对传入的数据进行处理我们需要得到评分的整数和小数部分letwm_poi_score=this.props.score||'';letscore=wm_poi_score.toString();letscoreArray=score.split('.');如果传入4.7，那么得到的scoreArray就是['4','7']4.根据数据计算对应的星星... 继续阅读 >
2021
08-31

React 高阶组件HOC用法归纳

一句话介绍HOC何为高阶组件(HOC),根据官方文档的解释：“高阶组件是react中复用组件逻辑的一项高级技术。它不属于reactAPI的组成部分，它是从react自身组合性质中抽离出来的一种模式。具体来说，高阶组件是函数，它接受一个组件作为参数，然后返回一个新的组件使用场景将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。优势使代码简洁... 继续阅读 >
2021
08-31

React forwardRef的使用方法及注意点

React forwardRef的使用方法及注意点 之前使用react.forwardRef始终无法应用于react高阶组件中，最近终于捣鼓出来了，于是记录下来。关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。React.forwardRef使用示例下面就是应用到React组件的错误示例：constA=React.forwardRef((props,ref)=><B{...props}ref={ref}/>)这就是我之前经常犯的错误，这里的ref是无法生效的。前面提到ref必须指向dom元素，那么正确方法就应用而生：constA=React.for... 继续阅读 >
2021
08-22

一文搞懂redux在react中的初步用法

Redux是一个数据状态管理插件，当使用React或是vue开发组件化的SPA程序时，组件之间共享信息是一个非常大的问题。例如，用户登陆之后客户端会存储用户信息（ID，头像等），而系统的很多组件都会用到这些信息，当使用这些信息的时候，每次都重新获取一遍，这样会非常的麻烦，因此每个系统都需要一个管理多组件使用的公共信息的功能，这就是redux的作用。如果你是从来没有接触过redux的开发者，希望您能够有耐心的看一看，我也是看好... 继续阅读 >
2021
08-08

示例详解react中useState的用法

useStateuseState通过在函数组件里调用它来给组件添加一些内部state。React会在重复渲染时保留这个state。useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似class组件的this.setState，但是它不会把新的state和旧的state进行合并。接下来通过一个示例来看看怎么使用useState。有这么一个需求：需要在iframe中加载外部网页。初始的代码我们通过函数... 继续阅读 >
2021
08-08

代码解析React中setState同步和异步问题

 React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScript库，即使React的主要作用是构建UI，但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案。 angular中用的是watcher对象，vue是观察者模式，react就是state了，他们各有各的特点，没有好坏之分，只有需求不同而选择不同。 &nb... 继续阅读 >
2021
08-08

React配置子路由的实现

React配置子路由的实现 1、组件First.js下有子组件：importAdminfrom'./Admin'importFormComfrom'./FormCom'importOnefrom'./One'importButtonComfrom'./ButtonCom'importMenuComfrom'./MenuCom'importStepsComfrom'./StepsCom'importTabsComfrom'./TabsCom'importTableComfrom'./TableCom'importMessageComfrom'./MessageCom'importNotificationComfrom'./NotificationCom'importProgressComfrom'./ProgressCom'import... 继续阅读 >
2021
08-08

手把手教你从零开始react+antd搭建项目

手把手教你从零开始react+antd搭建项目 之前的文章都是自己的学习日志，主要是防止自己遗忘之前遇到的坑。这次将从最基础的项目搭建开始讲起，做一个基于react和antd的后台管理系统。我会一步步进行下去，所以看完本文你哪怕不了解react，应该也会使用react做一个简单的项目。话不多少，直接开始。完整项目请前往GitHub查看，体验请点击这里。如果觉得可以请给一颗star，谢谢各位。1、开发环境：node.js-v12.16.3create-react-app-v3.4.1antd-v4.3.3项目开始前请自... 继续阅读 >
2021
08-08

react antd实现动态增减表单

react antd实现动态增减表单 之前写动态表单遇到过坑，就是用index下标做key会导致bug，而且很严重！今天有空写下文章记录下：怎么处理和逻辑我用的是antd3的版本，3和4的表单有点不一样，不过差别应该不大。需求：1、选择类型切换展示固定的模板2、通过新增字段可以动态增减表单里面的每一行3、控制每一行的字段是否需要必填4、编辑时候回填参数效果图：部分关键代码：importReact,{Component}from'react';importstylesfrom'./index.less';import{... 继续阅读 >
2021
08-08

浅谈React原生APP更新

目录App更新流程大致的流程图更新APP信息1.首先定义需要获取的文件地址2.通过文件地址,获取打完包后的版本信息3.替换现有文件中的信息大致流程图总结App更新流程1.在App打开时请求接口或文件,获取远程版本/版本更新说明/地址等等重用信息2.通过库或者原生方案,获取App的当前版本3.比较远程版本和当前版本的区别(可以使用库,也可以自己写一个比较方案)4.通过获取到的链接进行操作(可以跳转到对应网站下载,类似蒲公英这种,可... 继续阅读 >
2021
08-08

详解React Native与IOS端之间的交互

目录前置准备RN传值给iOS方法1正常传值给原生方法2传递回调函数方法3获取promise回调方法4获取promise的同步方式iOS传值给RN端初始的数据提供添加监听事件总结前置准备首先最好了解一点关于oc的语法知识1.创建声明文件nativeModule.h#import<Foundation/Foundation.h>#import<React/RCTBridgeModule.h>@interfacenativeModule:NSObject<RCTBridgeModule>@end2.创建文件nativeModule.m#import<Foundation... 继续阅读 >