分类：react

2021
05-25

详解React中的this指向

打算记流水账一般细数一下React中的this指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！起因：众所周知，React的设计是响应式的，使用者无需操纵DOM,操纵数据，页面就会渲染更新。数据一变就更新，是更新所有的DOM吗？当然不是，哪些变了就重新渲染哪些。那就要对数据变化前后的DOM进行比较。直接对比真实DOM吗？这样性能会很低，React比较的是虚拟DOM，虚拟DOM也是对象，只不过相较真实DOM而言... 继续阅读 >
2021
05-25

React hooks的优缺点详解

前言Hook是React16.8的新增特性。它是完全可选的，并且100%向后兼容。它可以让你使用函数组件的方式，运用类组件以及react其他的一些特性，比如管理状态、生命周期钩子等。从概念上讲，React组件一直更像是函数。而Hook则拥抱了函数，同时也没有牺牲React的精神原则。优点：1、代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过ReactHooks可以将功能代... 继续阅读 >
2021
05-23

React tsx生成随机验证码

React tsx生成随机验证码 Reacttsx生成随机验证码，供大家参考，具体内容如下最近开发React使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。tsx文件如下：React代码片.import*asReactfrom"react";constsize=4;constverifycode={width:"32%",height:"32px",marginLeft:"5%",display:"inline-block",position:"absolute"as"absolute",top:"0",right:"0",}exp... 继续阅读 >
2021
05-23

react自动化构建路由的实现

序在使用react-router-dom在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中.所以我们就会想到,使用react-router-dom中提供的config模式来编写我们的路由,这样写的好处就是我们可以将逻辑集中在一处,配置路由比较方便项目地址https://gitee.com/d718781500/autoRouter1.路由集中式我们先将下列数据定义在/src/router/index.js中在react的路由官方文档中就提供了... 继续阅读 >
2021
05-23

react实现浏览器自动刷新的示例代码

react实现浏览器自动刷新的示例代码 在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式hash和history，提供了原生JS/React/Vue共计六个版本供参考，每个版本的实现代码约25~40行左右（含空行）。什么是前端路由？路由的概念来源于服务端，在服务端中... 继续阅读 >
2021
05-23

react基础知识总结

前言最近在准备面试。复习了一些react的知识点，特此总结。开始React生命周期react16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWillMount，render和componentDidMount函数。组件在更新渲染时可以调用componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render和componentDidUpdate函数。组件在卸载时可以调用componentWillUnmount函数。借图：从Reactv16.3开始，... 继续阅读 >
2021
05-23

详解React setState数据更新机制

为什么使用setState在React的开发过程中，难免会与组件的state打交道。使用过React的都知道，想要修改state中的值，必须使用内部提供的setState方法。为什么不能直接使用赋值的方式修改state的值呢？我们就分析一下，先看一个demo。classIndexextendsReact.Component{this.state={count:0}onClick=()=>{this.setState({count:10})}render(){return(<div><span>{t... 继续阅读 >
2021
05-23

react项目引入scss的方法

react项目引入scss的方法 首先下载依赖yarnaddsass-loadernode-sass然后在项目路径node_modules/react-scripts/config/webpack.config.js打开文件找到加入红线内的代码{test:/\.scss$/,loaders:['style-loader','css-loader','sass-loader']},就可以使用scss了知识点扩展：Reactpwa的配置在到webpack配置文件中添加插件constWorkboxWebpackPlugin=require('workbox-webpack-plugin')plugins:[... 继续阅读 >
2021
05-23

React Native 脚手架的基本使用详解

React Native 脚手架的基本使用详解 构建项目在相应的路径下执行命令行：react-nativeinit项目名(名称不可使用连接符等特殊字符,命名可以参考APP应用名称比如FaceBook)react-native--v//查看版本react-nativeinitdemo--version0.48.0//安装指定的版本react-nativeinitdemo--verbose--version0.48.0//verbose是初始化的时候显示安装详情的，安装什么模块以及进度npmviewreact-nativeversions//可以查看react-native所有的版本信息跳转到对应路径... 继续阅读 >
2021
05-20

React 非父子组件传参的实例代码

React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活... 继续阅读 >
2021
05-20

详解React Fiber的工作原理

啥是ReactFiber？ReactFiber，简单来说就是一个从Reactv16开始引入的新协调引擎，用来实现VirtualDOM的增量渲染。说人话：就是一种能让React视图更新过程变得更加流畅顺滑的处理手法。我们都知道：进程大，线程小。而Fiber（纤维）是一种比线程还要细粒度的处理机制。从这个单词也可以猜测：ReactFiber会很“细”。到底怎么个细法，我们接着往下看。为什么会有ReactFiber？之前说了，ReactFiber是为了让React的视图更新过程... 继续阅读 >
2021
05-15

React事件节流效果失效的原因及解决

今天做react项目中，给一个inputonKeyDown事件做节流，出现了节流效果失效。问题代码：render(){return(<divclassName="search-bar"><inputclassName="search-input"type="text"placeholder="请输入要搜索的用户名(英文)"onKeyDown={this.throttle(this.handleKeyDown)}/></div>)}throttle=(fn)=>{letvalid=trueconstcontext=thisreturnfunction(){if(!va... 继续阅读 >
2021
05-15

React useEffect的理解与使用

React16.8新增的useEffec这个hook函数就是处理副作用的。所谓的“副作用”，举个通俗一点的例子，假如感冒了本来吃点药就没事了，但是吃了药发现身体过敏了，而这个“过敏”就是副作用。放到React中，本来只是想渲染DOM展示到页面上，但除了DOM之外还有数据，而这些数据必须从外部的数据源中获取，这个“获取外部数据源”的过程就是副作用。useEffect怎么用可以参考官网给出的例子，这里主要针对使用useEffect过程中遇到的问题进行... 继续阅读 >
2021
05-09

React使用高德地图的实现示例(react-amap)

React使用高德地图的实现示例(react-amap) pc版React重构，使用到了高德地图。搜了资料，发现有一个针对React进行封装的地图插件react-amap。官方网址：https://elemefe.github.io/react-amap/components/map，有兴趣的可以看下里面的API。react-amap安装1、使用npm进行安装，目前是1.2.8版本：cnpmireact-amap2、直接使用sdn方式引入<scriptsrc="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>react-amap使用importReact,{Component}from'... 继续阅读 >
2021
05-02

react显示文件上传进度的示例

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。在使用react,vue框架的时候,如果需要监听文件上传可以使用axios里的onUploadProgress.react上传文件显示进度demo前端快速安装react应用确保有node环境npxcreate-react-appmy-app//当前文件夹创建my-app文件cdmy-app//进入目录npminstallantd//安装antdUI组件npmrunstart//启动项目src->App.jsimportReactfrom'react';import'antd/dist/a... 继续阅读 >