React
文章平均质量分 92
React技术分享和学习笔记
。烦啦
这个作者很懒,什么都没留下…
展开
-
React Hooks 全面详解
标题转载 2021-06-13 16:19:02 · 3090 阅读 · 1 评论 -
React 状态管理工具 Mobx 基本使用
参考链接:https://juejin.cn/post/6844903766949363726Mobx官方文档前言Mobx是一个透明函数响应式编程(Transparently Functional Reactive Programming,TFRP)的状态管理库,它使得状态管理简单可伸缩:1. 基本概念actions:一些改变状态值(state)的动作。state:可观察的状态值computed value:根据state,用pure function计算出来的值reactions:因原创 2021-06-05 17:04:00 · 1167 阅读 · 0 评论 -
React Redux基本使用
原文链接:https://juejin.cn/post/6844903846666321934#heading-5https://juejin.cn/post/6926509360596123661#heading-11. reduxReact有props和state:props意味着父级分发下来的属性state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,这就是react的单向数据流这就意味着如果是一个数据状态非常复杂的应用,更多的时候发现React根本无法原创 2021-06-05 14:31:03 · 391 阅读 · 0 评论 -
React Context 基本使用
前言Context 通过组件树提供了一个传递数据的方法(类似一个简易的redux来存放公共数据),从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候,你需要从最外层的组件一层一层地通过props将数据传到最里层的组件时,你就需要慢慢向上寻找最初的值是什么,何苦呢?Context 提供了一种在组件之间共享这些值的方法,而无需显式地通过树的每一层传递 prop。1. 基本使用(1)创建contextcontext一般在顶层原创 2021-06-02 21:32:22 · 732 阅读 · 0 评论 -
React 高阶组件HOC详解
参考链接:https://juejin.cn/post/6844903815762673671https://juejin.cn/post/6844904050236850184前言高阶组件与自定义hooks是React 目前流行的状态逻辑复用的两种解决方案1.高阶组件是什么高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。高阶组件(HOC)是React中的高级技术,用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式,这种模式是由React自身的组转载 2021-05-30 17:40:09 · 756 阅读 · 0 评论 -
浅谈React 虚拟DOM,Diff算法与Key机制
参考文章:https://juejin.cn/post/68449038246839582861.虚拟dom原生的JS DOM操作非常消耗性能,而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom(Virtual Dom)每次数据更新后,重新计算虚拟Dom,并和上一次生成的虚拟dom进行对比,对发生变化的部分作批量更新。在此其中,React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比,提升性能和渲染效转载 2021-05-29 16:31:36 · 291 阅读 · 0 评论 -
React Class组件生命周期详解
1. 旧版生命周期(v16.3之前)组件挂载过程(1) constructor()constructor 构造方法常用来初始化stateconstructor是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法。当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字,就必须先调用super方法。在constructor中如果要转载 2021-05-23 15:26:28 · 2408 阅读 · 0 评论 -
理解 React合成事件与JavaScript原生事件
1. 原生事件原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对document进行原生点击事件监听。由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在component原创 2021-05-12 21:46:08 · 3164 阅读 · 0 评论