react类组件为组件创建错误边界 关注热度:13

为组件创建错误边界 默认情况下，组件渲染错误会导致整个应用程序中断，创建错误边界可确保在特定组件发生错误时应用程序不会中断. 错误边界是一个 React 组件，可以捕获子级组件..[详情]

react类组件避免重复无限渲染 关注热度:6

当应用程序状态发生更改时，React 会调用render 方法，如果在render 方法中继续更改应用程序状态，就会发生render 方法递归调用导致应用报错. Error: Maximum update depth exceeded. This can happen w..[详情]

react性能优化条件渲染 关注热度:7

优化条件渲染 频繁的挂载和卸载组件是一项耗性能的操作，为了确保应用程序的性能，应该减少组件挂戰和卸戰的次数。 在 React 中我们经常会根据条件渲染不同的组件． 条件渲染是一..[详情]

react优化避免使用内联样式属性 关注热度:8

当使用内联 style 为元素添加样式时，内联 style 会被编译为 JavaScript 代码， 通过 Javascript 代码将样式规则映射到元素的身上 ，浏览器就会花费更 多的时问执行脚本和渲染 Ui，从而增加..[详情]

react类组件的箭头函数 关注热度:7

类组件的箭头函数 在类组件中使用箭头西数不会存在 this 指向问题，因为箭头西数本身井不绑定 this. exportdefaultclassAppextendsReact.Component{handleClick=()=console.log(this)render(){returnbuttononClick={..[详情]

react类组件在构造函数中进行函数this绑定 关注热度:8

在类组件中如果使用 fn() {} 这种方式定义函数，函数this默认指向undefined, 也就是说函数内部的 this 指向需要被更正。 可以在构造函数中对函数的this进行更正，也可以在行内进行更正，..[详情]

react不要使用内联函数定义 关注热度:4

在使用内联函数后，render方法每次运行时都会创建该函数的新实例（ 函数是引用类型，比较内存地址是否相等，新实例内存地址肯定不一样 ）， 导致React在进行 Virtual DOM对比时，新旧..[详情]

react跟组件优化Fragment 关注热度:46

react跟组件必须有一个标记，如果不想多余一个div标记可以利用Fragment importReact,{Fragment}fromreactexportdefaultfunctionApp(){return(Fragmentdiv111/divdiv2222/div/Fragment)} 简写 importReact,{Fragment}fromreactexpo..[详情]

react-router-dom 6版本 Switch 报错 关注热度:7

在React Router版本6中，Switch组件已被删除。 下面是6版本使用案例 import{BrowserRouterasRouter,Route,Routes}fromreact-router-dom;functionApp(){return(RouterRoutesRoutepath=/aboutelement={About/}/Routepath=/contactelement=..[详情]

react组件条件判断懒加载 关注热度:5

根据条件进行组件懒加载 importReact,{lazy,Suspense}fromreactimport{BrowserRouterasRouter,Link,Route,Routes}fromreact-router-domconstHome=lazy(()=import(/*webpackChunkName:Home*/./page/Home))constList=lazy(()=import(/*webpackChunkN..[详情]

react使用组件懒加载lazy 关注热度:6

我们通常使用react路由都类似下面代码，这样做适合轻量级网页，因为它默认情况下react组件都会打包到bundle下， 但是一般用于后置的组件[异步]不需要首次加载，这时候就用到了组件懒..[详情]

react-memo缓存组件 关注热度:8

react函数组件方式如何缓存？ 可以利用memo方法去缓存，具体代码如下： importReact,{memo,useEffect,useState}fromreactfunctionShowName({name,index}){console.log(showNamerender...)returndiv----{name}{index}/div}constSh..[详情]

react性能优化之shouldComponentUpdate 关注热度:9

shouldComponentUpdate 纯组件只能进行浅层比较，要进行深层比较，使用 shouldComponentUpdate, 它用于编写自定义比较逻辑。 返回true重新渲染组件，返回false阻止重新渲染 函数第一个参数为 ne..[详情]

react性能优化之纯组件PureComponent 关注热度:7

PureComponent 1. 什么是纯组件 纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染。 2. 什么是浅层比较 比较引用数据类型在内存中的引用..[详情]

react性能优化之useEffect清理副作用 关注热度:5

React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM对比频率。 当我们使用组件时候，一般为window下变量注册全局事件，以及定时器（副作用），在组件协作前要清理..[详情]

react之css-in-js解决方案emotion学习 关注热度:31

Emotion 介绍 Emotion 是⼀个旨在使⽤ JavaScript 编写 CSS 样式的库. npminstall@emotion/core@emotion/styled JSX Pragma通知 babel, 不再需要将 jsx 语法转换为 React.createElement ⽅法, ⽽是需要转换为 jsx ⽅法..[详情]

react+formik构建表单[new] 关注热度:25

Formik 介绍 增强表单处理能⼒. 简化表单处理流程.[官⽹] https://jaredpalmer.com/formik/ 安装 npm install formik Formik使用 Formik 基本使⽤ 使⽤ formik 进⾏表单数据绑定以及表单提交处理 import{useFo..[详情]

React.createContext 给个完整实例，包含每个引入js写法 关注热度:16

当使用 React.createContext() 创建一个上下文对象时，可以按照以下的完整实例来使用和引入它： 1.创建上下文对象的文件 MyContext.js： //MyContext.jsimportReactfromreact;constMyContext=React.createContex..[详情]

react 把html当字符串整体输出 关注热度:23

在React中，如果你想将HTML代码作为字符串输出，你可以使用dangerouslySetInnerHTML属性。这是一个特殊的属性，它允许你通过设置一个包含__html属性的对象，将原始HTML代码注入到React组件中..[详情]

react className 判断多种方式 关注热度:30

在React中，你可以使用条件语句来动态确定组件的className。以下是一些示例代码，演示了不同的方法来实现这个目标： 使用ES6模板字符串： jsxconstmyComponent=()={constisActive=true;returndivclas..[详情]

react 动态获取图片地址 关注热度:106

在React中，要动态获取图片地址，你可以使用 require 引入图片或者使用 fetch 从服务器获取图片。下面是两种方法的示例： 1. 使用 require 引入图片： 这种方法适用于当你已经知道图片的..[详情]

react import 批量图片 关注热度:139

在React中，导入批量图片的一种常见方法是使用require语句。以下是一种可能的方法： 假设你将所有的图片放在一个名为images的文件夹中，并且所有的图片都以.jpg或.png为扩展名。你可以..[详情]

基本的React表单上传示例 关注热度:78

以下是一个基本的React表单上传示例，它使用axios库来将文件上传到服务器： importReact,{useState}fromreact;importaxiosfromaxios;functionFileUploadForm(){const[file,setFile]=useState(null);const[uploadPercentage,set..[详情]

React实现登录表单的示例代码 关注热度:94

React实现登录表单的示例代码..[详情]

React利用路由实现登录界面的跳转 关注热度:118

React利用路由实现登录界面的跳转..[详情]

浅谈React Router关于history的那些事 关注热度:88

浅谈React Router关于history的那些事..[详情]

详解对于React结合Antd的Form组件实现登录功能 关注热度:92

详解对于React结合Antd的Form组件实现登录功能..[详情]

React html中使用react的两种方式 关注热度:93

React html中使用react的两种方式..[详情]

使用 React 和 Threejs 创建一个VR全景项目的过程详解 关注热度:115

使用 React 和 Threejs 创建一个VR全景项目的过程详解..[详情]

react hooks入门详细教程 关注热度:82

react hooks入门详细教程..[详情]