分类：react

2021
05-02

react如何用懒加载减少首屏加载时间

最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题，最重要的应该是访问速度了。我就想react可不可以和vue一样用路由懒加载来减少首页渲染所花费的时间。于是找到了一个很好用的轮子：@loadable/component使用安装npminstall@loadable/component-D#oruseyarnyarnadd@loadable/component-D如何在路由中使用？在src/router/index.js文件中按照如下举例来写：importReactfrom"react";i... 继续阅读 >
2021
05-02

react项目如何运行在微信公众号

说明：项目是create-react-app结合antd-mobile写的H5，在微信公众号里运行。1、使用a标签预览或下载PDF。写法如下，手机上点击无反应，电脑上点击网页崩溃。<ahref='pdf或图片路径'>PDF或图片名称</a>原因是浏览器监测到访问非安全访问，给拦截下来了。于是根据报错提示，新增target和rel两个属性，写法如下：<ahref='pdf或图片路径'target='_blank'rel="noreferrer">PDF或图片名称</a>在电脑上和iOS上均可正常查看。不过... 继续阅读 >
2021
05-02

封装一个最简单ErrorBoundary组件处理react异常

封装一个最简单ErrorBoundary组件处理react异常 前言从React16开始，引入了ErrorBoundaries概念，它可以捕获它的子组件中产生的错误，记录错误日志，并展示降级内容，具体官网地址错误边界避免一个组件错误导致整个页面白屏不能使用等情况，使用优雅降级的方式呈现备用的UI，错误边界可以在渲染期间、生命周期和整个组件树的构造函数中捕获错误。自React16起，任何未被错误边界捕获的错误将会导致整个React组件树被卸载ErrorBoundary意义某些UI崩溃，不至于... 继续阅读 >
2021
04-27

React Fiber结构的创建步骤

ReactFiber的创建当前React版本基于V17.0.2版本，本篇主要介绍fiber结构的创建。一、开始之前个人理解，如有不对，请指出。首先需要配置好React的debugger开发环境，入口在这里：github执行npmruni，安装依赖，npmstart运行环境。二、从React.render开始通过在项目入口处调用React.render，打上Debug，查看React调用栈。constroot=document.getElementById('root');ReactDOM.render(<React.StrictMode><App/></Rea... 继续阅读 >
2021
04-27

React三大属性之Refs的使用详解

refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候，用来获取节点的方法。在React官方的解释中，它的适用范围如下：管理焦点，文本选择或媒体播放。触发强制动画。集成第三方DOM库。React文档中再三强调，请不要过度使用refs，所以当我们可以用dom原生对象解决时，尽量不要使用refs依照之前的写法，首先是给出类组件和函数组件中refs的写法类组件在类中，refs有三种方式，目前最常用的是回调的... 继续阅读 >
2021
04-27

从头写React-like框架的工程搭建实现

最近在网上看到了BuildyourownReact这篇文章，作者从零开始实现了一个简易类React框架，虽然没有过多的优化，但React中的核心思想ConcurrentMode，FiberReconciler等都有实现，看完后对理解React有很大帮助，因此我想在BuildyourownReact的基础上，对代码进行拆分，搭建起自己的框架工程，然后完善教程中没完成的其他功能，代码在rac中。工程搭建技术栈上我选择用TypeScript开发，Rollup打包,都是平时用... 继续阅读 >
2021
04-27

React三大属性之props的使用详解

上期讲了state，接下来讲讲props。props功能在于组件间通信（父子组件），首先说说在各种组件中的用法：类组件//父组件传值classFatherextendsReact.PureComponent{render(){return(<Sonvalue={"son"}/>)}}classSonextendsReact.PureComponent{render(){return(<div>thisdatais{this.props.value}</div>)}}函数组件functionFa(){retur... 继续阅读 >
2021
04-27

React 三大属性之state的使用详解

React中很多地方需要用到数据，这在React中被叫做状态，我们需要一个专门管理状态的方法，于是state相关的就诞生了。state应该被要求有两个基本功能，一，能够存储一定的值，从而能被react使用，二，能够再它改变的时候被React监听到并且重新渲染。这里分别介绍一下在类和函数组件中state的写法：类组件classClassComponentextendsReact.Component{constructor(props){super(props)}//可写可不写render(){... 继续阅读 >
2021
04-27

React如何利用Antd的Form组件实现表单功能详解

一、构造组件1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。这里先引用了封装的表单域<Form.Item/>2、使用Form.create处理后的表单具有自动收集数据并校验的功能，但如果不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用Form.create并自行处理数据经过Form.create()包装过的组件会自带this.props.form属性，this.props.form提供了很多API来处理数据，如getFieldDecora... 继续阅读 >
2021
04-27

React获取input值并提交的2种方法实例

方法一 利用DOM提供的Event对象的target事件属性取值并提交importReactfrom'react';classInputDemoextendsReact.Component{state={InputValue:"",//输入框输入值};handleGetInputValue=(event)=>{this.setState({InputValue:event.target.value,})};handlePost=()=>{const{InputValue}=this.state;console.log(InputValue,'------InputValue');//在此做... 继续阅读 >
2021
04-27

React Hooks常用场景的使用(小结)

前言React在v16.8的版本中推出了ReactHooks新特性。在我看来，使用ReactHooks相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过ReactHooks可以将功能代码聚合，方便阅读维护；组件树层级变浅，在原本的代码中，我们经常使用HOC/renderprops等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染... 继续阅读 >
2021
04-27

React中useRef的具体使用

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。首先来看一下它传统的用法：importReact,{useState,useEffect,useMemo,useRef}from'react';exportdefaultfunctionApp(props){const[count,setCount]=useState(0);constdoubleCount=useMemo(()=>{return2*count;},[count]);c... 继续阅读 >
2021
04-27

React 错误边界组件的处理

React 错误边界组件的处理 这是React16的内容，并不是最新的技术，但是用很少被讨论，直到通过文档发现其实也是很有用的一部分内容，还是总结一下～React中的未捕获的JS错误会导致整个应用的崩溃，和整个组件树的卸载。从React16开始就是这样。但是同时React也引入了一个新的概念——错误边界。定义，是什么错误边界仍然是一种组件，可以捕获（打印或者其他方式）处理该组件的子组件树任何位置的JavaScript错误，并根据需要渲染出备用UI.工作方式类似... 继续阅读 >
2021
04-27

详解React 父组件和子组件的数据传输

在学习React框架组件间数据传输知识点前，我们需要先明确几点使用原则。React的组件间通讯是单向的。数据必须是由父级传到子级或者子级传递给父级层层传递。如果要给兄弟级的组件传递数据，那么就要先传递给公共的父级而后在传递给你要传递到的组件位置。这种非父子关系的组件间传递数据，不推荐使用这种层层传递的方式；而是选择使用维护全局状态功能模块（Redux）一、父组件向子组件传递数据父组件向子组件传递数... 继续阅读 >
2021
04-27

详解React中key的作用

要了解React中key的作用，可以从key的取值入手，key的取值可以分为三种，不定值、索引值、确定且唯一值在下面的代码中，key的取值是不定值（Math.random()）问题：点击按钮的时候，span的颜色会变成红色吗？importReact,{useState}from'react';functionApp(){const[initMap,setInitMap]=useState([1,2,3,4]);consthandleClick=()=>{setInitMap([1,2,3,4])varspanEle=document.getElementsByTagNa... 继续阅读 >