网站地图    收藏   

主页 > 前端 > react >

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

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

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

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

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

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

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

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

  • react类组件的箭头函数

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

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

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

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

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

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

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

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

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

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

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

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

  • react使用组件懒加载lazy

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

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

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

    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清理副作用

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

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

  • react之css-in-js解决方案emotion学习

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

    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当字符串整体输出 关注热度:22

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

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

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

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

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

  • react import 批量图片 关注热度:135

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 首页
  2. 1
  3. 2
  4. 下一页
  5. 233

栏目列表一览

入门教程

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com