React
文章平均质量分 58
hyupeng1006
前端路上一起前进!互相关注、相互学习
展开
-
React Hooks中使用useState异步回调获取不到最新值的问题
在 setState 的第⼆个参数回调函数中再次进⾏ setState,也不存在闭包作⽤域问题,但是 React Hook 中 useState 移除了 setState 的第⼆个参数,⽽且若嵌套太多也不佳;// 这⾥也可以不改,使⽤第⼀中传参⽅式 setArr([...arr, 1]);// 这⾥必须改成回调函数传参⽅式,否则会读取旧状态,导致异常。通常情况下 setState 直接使⽤上述第⼀种⽅式传参即可,但在⼀些特殊情况下第⼀种⽅式会出现异常;原创 2023-05-31 14:30:43 · 2946 阅读 · 0 评论 -
React umi中使用sass
umi默认支持less和css,如果想要使用,需要安装插件以及配置。原创 2023-01-06 11:41:15 · 972 阅读 · 0 评论 -
ReactHook hooks和定时器setInterval产生的bug
使用定时器改变state,state的值并不是最新值。产生原因:因为每次setValue后会重新创建函数,由于并没有及时清理掉setInterval,setInterval执行的上下文环境都是第一次创建本函数式组件的上下文原创 2022-12-12 14:13:13 · 435 阅读 · 0 评论 -
React hooks之useCallback的使用场景及其深度解读
1、useCallBack不是每个函数都需要使用!2、useCallBack在什么情况下使用?原创 2022-11-08 17:11:22 · 1659 阅读 · 0 评论 -
React移动端使用canvas实现手势密码登录
React移动端使用canvas实现手势密码登录。原创 2022-07-21 11:24:06 · 694 阅读 · 0 评论 -
react生成二维码(qrcode.react)
安装npm提供的qrcode.react依赖包原创 2022-06-28 11:48:42 · 2399 阅读 · 2 评论 -
React的事件处理为什么要bind(this) 改变this的指向?有没有不需要bind的解决方法?
react的事件处理会丢失this,所以需要绑定,为什么会丢失this?接着看~首先来看摘自官方的一句话: 1 You have to be careful about the meaning ofthisinJSX callbacks. In JavaScript,classmethods are not bound bydefault. 这句话大概意思就是,你要小心jax回调函数里面的this,class方法默认是不会绑定它的让...原创 2021-10-13 17:49:21 · 482 阅读 · 0 评论 -
React.lazy懒加载组件
1. React.lazy的用法React.lazy方法可以异步加载组件文件。const Foo = React.lazy(() => import('../componets/ChildComponent));React.lazy不能单独使用,需要配合React.suspense,suspence是用来包裹异步组件,添加loading效果等。<React.Suspense fallback={<div>loading...</div>}>原创 2021-10-12 10:19:31 · 953 阅读 · 0 评论 -
React获取当前点击元素的属性值(标签上绑定值)
<li className="proviceLi" data-name="山东" onClick={(e)=>this.selectProvice(e)}>山东</li>selectProvice=(e)=>{ console.log(e.currentTarget.getAttribute("data-name"))}原创 2021-10-09 14:56:51 · 2989 阅读 · 0 评论 -
React Context(React.createContext) 作用和使用案例
官方文档 的demo已经很棒了。但我觉得我的描述会让你更容易理解。1.ContextContext 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么~(无底洞下往上钻)2.APIReact.createContext:创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Co.原创 2021-08-13 10:41:17 · 1552 阅读 · 0 评论 -
谈谈Vue和React的区别
在之前写的localStorage与Vuex的区别这篇文章中讲过关于这个类型的题目,其中分析过描述区别,就是求同存异的过程。那接下来用同样的思路来解这道题目。首先找到 Vue 和 React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来的趋势等。vue和react区别共同点Vue和React存在着很多的共同点: 数据驱动视图 组件化 都使用Virtual DOM 1. 数据驱动视图在jquery时代,我们需要频繁的操...原创 2021-04-07 09:12:33 · 275 阅读 · 0 评论 -
React 性能优化 (包括原理、技巧、Demo、工具使用)
本文分为三部分,首先介绍 React 的工作流,让读者对 React 组件更新流程有宏观的认识。然后列出笔者总结的一系列优化技巧,并为稍复杂的优化技巧准备了 CodeSandbox 源码,以便读者实操体验。最后分享笔者使用 React Profiler 的一点心得,帮助读者更快定位性能瓶颈。React 工作流React 是声明式 UI 库,负责将 State 转换为页面结构(虚拟 DOM 结构)后,再转换成真实 DOM 结构,交给浏览器渲染。当 State 发生改变时,React 会先进行调和(Re转载 2021-03-22 10:05:04 · 351 阅读 · 0 评论 -
react无状态函数式组件同时使用Form和dva connect连接models的写法
原创 2021-01-21 08:57:34 · 1456 阅读 · 0 评论 -
React中key属性的作用及原理解析
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.相信在react的使用过程中,大家或多或少都会遇到过这样的警告,这个警告是提醒开发者,需要对渲染的组件添加key属性,那么,这个key属性的作用到底是什么呢?我们先原创 2020-12-03 16:21:55 · 352 阅读 · 0 评论 -
深入理解React虚拟DOM
一、什么是虚拟DOM虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。比如:var element = { element: 'ul', props: { id:"ulist" }, children: [ { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] }, { element: 'li', props: { id:"second"原创 2020-12-03 16:19:21 · 316 阅读 · 0 评论 -
react、redux、react-redux、redux-saga、dva之间的关系
【react】定位:React 是一个用于构建用户界面的JavaScript库。 特点:它采用声明范式来描述应用,建立虚拟dom,支持JSX语法,通过react构建组件,能够很好的去复用代码; 缺点:react抽离了dom,使我们构建页面变得简单,但是对于一个大型复杂应用来说,只有dom层的便捷是不够的,如何组织、管理应用的代码,如何在组件件进行有效通信,这些它都没有解决;因此,它还需要一个前端架构才能应对大型应用;【redux】1、定位:它是将flux和函数式编程思想结合在一起形成的架构;原创 2020-12-01 15:49:47 · 957 阅读 · 0 评论 -
React.Component、React.PureComponent、React.FC的区别和使用
1. React.Component最常见的,包含最常用的render(),componentDidMount(),shouldComponentUpdate…shouldComponentUpdate(nextProps, nextState)判断 React 组件的输出是否受当前 state 或 props 更改的影响。意思就是只要组件的 props 或者 state 发生了变化,就会重新构建 virtual DOM,然后使用 diff算法进行比较,再接着根据比较结果决定是否重新渲染整个组件。原创 2020-10-28 14:14:25 · 4419 阅读 · 0 评论 -
React性能优化:PureComponent的使用原则
React15.3中新加了一个PureComponent类,取代之前的PureRenderMixin , PureComponent可以进行React性能优化,减少不必要的render渲染次数,使用时只要把继承类从Component换成PureComponent。PureComponent的原理是继承了Component类,自动加载shouldComponentUpdate函数,当组件更新时,shouldComponentUpdate对props和state进行了一层浅比较,如果组件的props和sta原创 2020-10-27 14:41:25 · 690 阅读 · 0 评论 -
react的this.setState详细介绍
this.setState是react类组件中最常用的一个react API,使用它可以改变state从而改变页面。今天我们就来详细的学习一下这个东西。但是this.setState还有很多的知识点你没有了解,真正项目当中可能会出现很多你不理解的bug。比如说:this.setState是异步的在你调用了this.setState后在他的下面输出他的结果还是没变的状态this.set...原创 2020-01-20 16:54:46 · 808 阅读 · 0 评论 -
Vue-Router和React-Routerd对比
*仅从设计理念、使用角度进行对比,不涉及实现原理。*总的来说,二者的设计理念大致相同,但是由于对应的框架分别是VUE和React,使得它们的使用方式略有些细微的差别。下文的着重点就是对比它们的差别部分。无论是vue-router还是react-router,它们的最基本的初衷就是实现前端路由。所谓前端路由,简单来说,就是当浏览器的url产生变化时,不向服务器进行请求,而是直接控制前端页面产生变化,...原创 2018-06-21 10:11:32 · 4638 阅读 · 2 评论 -
redux和react-redux小记(一)
redux和react-redux小记 一开始接触redux时对于它的数据state和react本身的数据state还有点容易打结(它们是完全不同的两个东西,后面会讲到)现在搞清楚一点了,来小结一下。在此之前,还是先讲一下redux是干嘛的,也就是...转载 2018-06-21 12:35:26 · 293 阅读 · 0 评论 -
使用dva+antd快速构建单页面应用(理论)
项目结构及使用工具集原文地址: 个人博客或joescott.coding.me/blog`project |----- src 项目源代码 |----- dist 项目编译目标 |----- .roadhogrc 路霸运行配置文件 |----- lumen_api RESTful api代码目录 |----- mock 模拟数据服务目录`src ...转载 2018-07-03 17:12:55 · 1251 阅读 · 0 评论 -
React小笔记
一、标签根据条件表达式添加样式1、style={item.key === selectKey ? { color: '#108EE9' } : null}2、className={`title ${index ===this.state.active ?'active':''}`}二、list循环渲染{goodsList.map(item => (<Item...原创 2019-01-23 10:07:10 · 127 阅读 · 0 评论 -
React父组件调用子组件里的方法
子组件:componentDidMount() { this.props.onRef(this); }closeTree = () => { this.setState({ isShows: false }); };父组件:jsx文件里: onRefTree = ref => { // this.childT...原创 2019-02-12 16:44:13 · 2148 阅读 · 0 评论 -
React创建组件的两种方式
1 通过 JS函数 创建(无状态组件)2 通过 class 创建(有状态组件)函数式组件 和 class 组件的使用场景说明:1 如果一个组件仅仅是为了展示数据,那么此时就可以使用 函数组件2 如果一个组件中有一定业务逻辑,需要操作数据,那么就需要使用 class 创建组件,因为,此时需要使用 stateJavaScript函数创建注意:1 函数名称必须为大写字母开头,React...原创 2019-03-20 11:18:14 · 426 阅读 · 0 评论 -
React特殊的prop属性 - (children)
原创 2019-03-27 17:34:34 · 497 阅读 · 0 评论 -
React生命周期详解
shouldComponentUpdateReact开发时,一个很奇妙的事情就是当state或props未发生改变时,组件依然会重新渲染,所以当追求性能的时候,shouldComponentUpdate就派上了用场。shouldComponentUpdate生命周期函数是重渲染时render()函数调用前被调用的函数,它接受两个参数:nextProps和nextState,分别表示下一个p...原创 2019-04-01 16:16:49 · 135 阅读 · 0 评论 -
React开发注意点
1、setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新,因为没有调用render函数。那么有办法在setState之后直接获取到更新的值吗?回答是有我们可以使用setSta...原创 2019-04-01 17:16:37 · 152 阅读 · 0 评论 -
React事件
一、事件处理函数的使用鼠标事件:onClickonContextMenuonDoubleClickonMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUponDroponDragonDragEndonDragEnteronDragExit...原创 2019-04-09 17:42:08 · 124 阅读 · 0 评论 -
Vuex与Redux对比
*仅从设计理念、使用角度进行对比,不涉及实现原理。*尤大也说过VUEX是吸收了Redux的经验,放弃了一些特性并做了一些优化,代价就是VUEX只能和VUE配合。而Redux则是一个纯粹的状态管理系统,React利用React-Redux将它与React框架结合起来。VUEX与React-Redux:一个是针对VUE优化的状态管理系统,一个仅是常规的状态管理系统(Redux)与React框架的结合版...原创 2018-06-21 09:40:22 · 31320 阅读 · 3 评论