分类：React

2022
06-07

React-Native之截图组件react-native-view-shot的介绍与使用小结

目录一、现象二、解决三、总结：一、现象1、需求：把某展示页面进行截取保存到相册、并可进行以海报的形式分享出去；2、支持iOS和安卓二、解决1、安装：npmi--savereact-native-view-shot2、进行链接处理：react-nativelinkreact-native-view-shot3、当为IOS时执行还需要执行一下命令（安卓不用）：cdios&&podinstall&&cd..4、使用：（1）、引用：import{captureRef}from"react-native-view-shot";（2）、模板：... 继续阅读 >

2022
05-24

React Native JSI实现RN与原生通信的示例代码

目录什么是JSIJSI有什么不同在iOS中使用JSIiOS端配置RN端配置js调用带参数的原生方法原生调用JS原生调用带参数的JS方法在原生端调用js的函数参数总结问题参考资料什么是JSIReactNativeJSI(JavaScriptInterface)可以使JavaScript和原生模块更快、更简单的通信。它也是ReactNative新的架构体系中FabricUI层和Turbo模块的核心部分。JSI有什么不同JSI移除了原生代码和JavaScript代码之间的桥接（bridge），同时也省去... 继续阅读 >

2022
04-20

React Native 启动流程详细解析

导读：本文以react-native-cli创建的示例工程（安卓部分）为例，分析ReactNative的启动流程。工程创建步骤可以参考官网。本文所分析ReactNative版本为v0.64.2。我们知道上述工程是一个安卓应用，打开android/目录下源码文件，首先发现它创建了两个java文件：MainApplication.java和MainActivity.java，分别做了应用以及主Activity的定义。安卓应用的启动流程是：在启动第一个activity之前会创建一个全局唯一的... 继续阅读 >

2022
04-12

基于React-Dropzone开发上传组件功能(实例演示)

这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端，在这个过程中认识到了许多有趣的前端UI框架——React-Bootstrap、AntDesign、MaterialUI、Bulma等。而比较流行的上传组件也不少，而目前用户比较多的是jQuery-File-Upload和Dropzone，而成长速度快的新晋有Uppy和filepond。这次我要讲述的是在React-Flask框架上开发上传组件的技巧。我目前主要以React开发前端，在这个过程中认识到了许多有... 继续阅读 >

2022
04-07

React Class组件生命周期及执行顺序

一、react组件的两种定义方式1、函数组件，简单的函数组件像下面这样，接收Props，渲染DOM，而不关注其他逻辑functionWelcome(props){return<h1>Hello,{props.name}</h1>;}函数组件无法使用State，也无法使用组件的生命周期方法，没有this，纯展示型组件。建议：在写组件时，先思考组件应不应该写成展示型组件，能写成展示型组件的尽量写成展示型。2、class组件，需要继承React.Component，有State，有生命周期，有this3、共... 继续阅读 >

2022
02-26

React中使用axios发送请求的几种常用方法

目录React中安装并引入axios依赖使用axios进行GET请求使用axios.get方式使用axios(config{...})使用axios进行POST请求使用axios.post使用axios(config{...})同时发送多个请求详细config对象配置项axios的返回值对象responseaxios的全局配置axios的单一实例化配置axios拦截器的使用React中安装并引入axios依赖在React项目中使用axios请求，首先需要安装axios：npminstallaxios--save然后在react文件中使用typescript方式导入ax... 继续阅读 >

2022
02-10

使用 Rails API 构建一个 React 应用程序的详细步骤

目录后端：RailsAPI部分前端：React部分React组件使用axios获取API数据【51CTO.com快译】使用React创建项目时，动态数据无法保存的问题要怎么办呢？为此，我开始寻找一个充当备份的API来解决这一问题。在本文中，我将介绍如何设置和构建一个以React作为前端的RailsAPI的一些要点，以帮助那些和我遇到一样问题的人。本文计划使用RailsAPI作为后端，React作为前端，所以需要学习本文的人遵循同样的路径和步骤。后端：RailsAP... 继续阅读 >

2022
01-17

react路由守卫的实现(路由拦截)

react不同于vue，通过在路由里设置meta元字符实现路由拦截。在使用Vue，框架提供了路由守卫功能，用来在进入某个路有前进行一些校验工作，如果校验失败，就跳转到404或者登陆页面，比如Vue中的beforeEnter函数：...router.beforeEach(async(to,from,next)=>{consttoPath=to.path;constfromPath=from.path;})...react实现路由拦截的基本思路还是利用Route的render函数。通过判断拦截条件来实现不同的组... 继续阅读 >

2022
01-06

React Native自定义路由管理的深入理解

目录1、自定义路由2、Tab导航3、数据回传总结1、自定义路由众所周知，不管是在原生Android还是iOS，它们都有一个默认的路由路由栈管理类。由于ReactNative官方没有提供路由管理的组件，所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。Stack.Navigator使用的命名路由，所谓命名路由，指的是路由需要先声明然后才能使用。为了方便管理路由页面，我们会将路由放到一个统一的位置，比如screens包下，如下... 继续阅读 >

2021
12-14

从零搭建Webpack5-react脚手架的实现步骤(附源码)

目录webpack5正式开始搭建指南开始搭建完成了依赖的准备工作,开始搭建项目编写webpack.dev.js开发配置开始编写webpack.prod.js生产配置编写scripts命令配置代码质量管控流程单元测试webpack5近期终于有时间和精力专注于公司技术基础建设了，于是一开始，将公司的Saas系统改造成了微前端模式，解决了历史遗留的一部分问题接着，想着webpack5已经发布这么久了，该在生产环境用起来了，也顺势想推动微前端、webpack5、vite在业内的普... 继续阅读 >

2021
12-13

关于React Native使用axios进行网络请求的方法

在前端开发中，能够完成数据请求的方式有很多，如Ajax、jQueryajax、axios和fetch等。不过，随着技术的发展，现在能够看到的基本上也就axios和fetch两种。axios是一个基于Promise的Http网络库，可运行在浏览器端和Node.js中，Vue应用的网络请求基本都是使用它完成的。axios有很多优秀的特性，如支持请求的拦截和响应、取消请求、JSON自动转换、客户端防御XSRF等。使用axios之前，需要先在项目中安装axios插件，安装命令如下。//np... 继续阅读 >

2021
12-09

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

练手的一套项目react+ts虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼项目代码：https://gitee.com/fine509/react_jiar效果图这是三个主要页面，还有一些小细节等等一些值得注意的地方（只是讲大概的功能，没有具体的详解怎么用）使用错误边界处理，getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。useSearchParams的使用这个api可以获取和设置我们这... 继续阅读 >

2021
12-09

React开启代理的2种实用方式

开启代理的两种方式react并没有封装好了的ajax请求的代码供我们直接使用，在进行交互的时候，我们需要自己封装ajax代码或者使用第三方ajax库，一般我们用axios(轻量级)。先说一下为什么需要代理？比如说，在本地写一个端口为5000的服务器时，当我们通过端口3000去发生请求，会出现跨域的问题（原来3000端口的ajax引擎把响应拦截了），此时可以通过代理来解决问题。所谓的代理就是一个传递信息的工具，端口为3000的请求发给开在3000... 继续阅读 >

2021
11-17

深入浅析React refs的简介

一、是什么Refs在计算机中称为弹性文件系统（英语：ResilientFileSystem，简称ReFS）React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点二、如何使用创建ref的形式有三种：传入字符串，使用时通过this.refs.传入的字符串的格式获取对应的元素传入对象，对象是通过React.... 继续阅读 >

2021
11-09

React中useEffect 与 useLayoutEffect的区别

目录前置知识useEffectcommitBeforeMutationEffectscommitMutationEffectscommitLayoutEffects后续阶段useLayoutEffect结论前置知识我们可以将React的工作流程划分为几大块：render阶段：主要生成Fiber节点并构建出完整的Fiber树commit阶段：在上一个render阶段中会在rootFiber上生成一条副作用链表，应用的DOM操作就会在本阶段执行commit阶段的工作主要分为三部分，对应到源码中的函数名是：commitBeforeMu... 继续阅读 >

2021
11-05

react为什么不推荐使用index作为key

1.旧的虚拟dom和新的虚拟dom对比，首先看他们的key是否相同2.相同继续对比他们的内容，不同生成新的真实dom进行替换3.如果内容和key都相同，复用旧的真实dom不做改变那么如果我们使用遍历时候自动生成的index作为每个节点的key可能会出现什么问题呢？下面放个小案例首先，初始时我们进行遍历persons他会是这样一个过程，源数据persons:[{id:1,name:“张三”,age:15},{id:2,name:“李四”,age:16},],生成的真实dom... 继续阅读 >