react
文章平均质量分 56
react高级进阶
qdmoment
全局掌控,剖析网站终端建设
展开
-
antd扩展动态表单formake,支持事件配置和复杂嵌套
formake 是一款动态表单生成器,基于 react(16.10 以上), antd(5.x)开发,继承了 antd 组件接口,并在此基础上添加了扩展。支持事件配置和多层嵌套,可快速生成复杂表单。原创 2023-05-28 00:25:34 · 822 阅读 · 0 评论 -
关于class类链式继承,实例化及react super(props)原理
class定义类是es6提供的新的api,比较直观,class类继承也有着一定的规律性,在egg, webpack等库的源码中有着很多的应用场景。结合一些初学者可能遇到的难点,本文主要对其链式继承进行总结,关于super关键字的使用请参考我的其他文章es6中super关键字的理解。class定义class App { constructor(options){ s...原创 2020-01-15 19:17:41 · 740 阅读 · 0 评论 -
react16 Fiber架构的实现
Fiber概念和背景为什么叫fiber对于进程(Process)和线程(Thread)的概念,我们应该比较了解,在计算机科学中还有一个概念叫做Fiber,英文含义就是“纤维”,意指比Thread更细的线,也就是比线程(Thread)控制得更精密的并发处理机制。react把最新的调度架构取名为fiber,也意为实现更精密的任务控制。但是react fiber和这个fiber是不同的两个概念。...原创 2020-01-14 19:25:36 · 660 阅读 · 0 评论 -
jest单元测试实践总结及react单元测试
jest 是facebook推出的一款测试框架,集成了 Mocha,chai,jsdom,sinon等功能。基本用法和 mocha 和 chai 的功能很像,甚至可以兼容部分 mocha 和 chai 的语法。可以这么写import React from 'react'import { shallow } from 'enzyme'import CommentItem from ...原创 2020-01-03 17:10:25 · 1526 阅读 · 0 评论 -
使用react-hooks实现异步获取数据的封装
react-hooks作为react新的api,深受广大开发者的欢迎,不仅简化了代码,嵌套,还更符合react函数式编程的思想。react-hooks并不复杂,但是初期可能很多多学并不理解,不能从class写法转变过来。其实class的多个生命周期是可以通过hooks模拟实现的,且在服务端渲染时,hooks也有相对的优点,比如class在服务端渲染时存在的生命周期多次触发。本文就之前项目中相对复杂...原创 2019-12-18 11:46:15 · 4382 阅读 · 1 评论 -
浏览器requestIdleCallback的原理和应用场景
一般的浏览器每秒钟会绘制60帧,也就是每帧需要16ms左右,如果js计算任务长时间占用线程那个,会导致一些ui无法及时得到渲染,出现卡顿。一帧内需要完成如下六个步骤的任务:处理用户的交互 JS 解析执行 帧开始。窗口尺寸变更,页面滚去等的处理 requestAnimationFrame(rAF) 布局 绘制上面六个步骤完成后没超过 16 ms,说明时间有富余,此时就会执行re...原创 2019-09-05 01:05:06 · 3336 阅读 · 0 评论 -
react最新hooks特性
use hooks使得逻辑复用变得相对简单,hooks弥补了高阶组件,render props的缺点,同时又具有了二者的优点。而且更贴近函数式编程,虽然不在所有的地方都可以使用hooks,但尽量使用hooks去实现新的组件1,useEventListenter2,useWhyDidYouUpdate3,useDarkMode4,useMedia5,useLockBodyScro...原创 2019-07-24 10:33:43 · 440 阅读 · 0 评论 -
react服务端渲染的必要性和基础配置
为什么要进行服务端渲染:1,单页面应用seo不友好,浏览器会以为网站是一个空的html文件2,js加载完成后才会出现内容,首次加载时间较长,体验不好于是就有了服务端渲染基础配置:服务端渲染框架hot-module-replacement使用 react-hot-loader 配置步骤:babelrc配置:plugins:['react-hot-loader/bab...原创 2019-07-03 01:27:45 · 180 阅读 · 0 评论 -
react最新fiber架构原理和流程
react16以后做了很大的改变,对diff算法进行了重写,从总体看,主要是把一次计算,改变为多次计算,在浏览器有高级任务时,暂停计算。原理:从Stack Reconciler到Fiber Reconciler,源码层面其实就是干了一件递归改循环的事情fiber设计目的:解决由于大量计算导致浏览器掉帧现象。由于js是单线程的,解决主线程被长时间计算占用的问题,就是将计算分为多个步骤,分...原创 2019-06-19 17:25:57 · 3191 阅读 · 0 评论 -
从0实现react
react当前的火热程度非常高,各种培训课程也是蜂拥而至,然而大多数人并没有真正的学会react,只是停留在使用api的基础上,那么react到底是怎样实现的呢。除了虚拟dom diff算法,很多人对react的概念就没了,比如生命周期是如何实现的,jsx是如何转化的,setState是如何工作的,react内部的设计原理有没有可以优化的地方等等。带着这些问题,我们从0开始封装一个react简易版...原创 2019-05-15 10:25:02 · 166 阅读 · 0 评论 -
react-redux核心api及原理
react-redux配合redux使用,可以使组件轻松的拿到全局状态,方便组件间的通信。react-redux主要提供两个方法Provider,connectProvider主要用来传入store,这里不再做详细介绍,相信来看这篇文章的对其使用都很了解了。接下来详细探讨下connectconnect接收四个参数:connect([mapStateToProps], [map...原创 2019-04-15 18:32:49 · 660 阅读 · 0 评论 -
俯瞰react,一个宗旨,一个类
React 是 Facebook 内部的一个JavaScript类库,可用于创建Web用户交互界面。他引入了一种新的方式来处理浏览器DOM,只需要声明式的定义各个时间点的用户界面,无需关心数据变化时需要更新那一部分DOM。在任何时间点,React都能以最小的DOM修改来更新整个应用程序。react作为当前最火的前端框架之一,越来越多的企业选用react作为网站主流框架。但是react的门槛却相...原创 2018-09-06 22:50:15 · 183 阅读 · 0 评论 -
react标签属性dangerouslySetInnerHTML将字符串转化为html(动态渲染)
根据需求,前端页面有时需要动态展示后端返回的代码,但是此时的代码是字符串类型,直接展示,页面显示的只是字符串,这时就用到了react标签属性dangerouslySetInnerHtml属性;dangerouslySetInnerHtml用法:dangerouslySetInnerHtml = {__html:'这里是后端返回字符串代码'}注:1,dangerouslySetInne...原创 2018-10-02 16:36:21 · 3199 阅读 · 0 评论 -
react高级技术点总结
Mixinmixin允许我们定义可以再多个组件中共用的方法,它们就是混合近组件中的对象而已,React的Mixin能够防止静默函数覆盖,同时支持多个Mixin混合React.createClass({ mixins : [{ getInitialState: function(){return {a : 1}} }], getInitialSt...原创 2019-10-10 15:38:35 · 2556 阅读 · 0 评论 -
applyMiddleware原理和middleware中间件原理及应用场景
首先看下redux执行流程:redux设计思想:(1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。(2)View:与 State 一一对应,可以看作 State 的视觉层,也不合适承担其他功能。(3)Action:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。想来想去...原创 2018-11-13 13:43:24 · 3241 阅读 · 0 评论 -
react组件设计理念(译)
在设计组件时,最重要的是决定它的数据是否需要被控制。与其尝试在状态中镜像一个属性值,不如让组件被控制,并在某些父组件的状态中合并两个不同的值。例如,与其让子组件既接收一个“committed”属性又要维护一个“draft”的状态,不如让父级组件同时管理两个状态——state.committedValue和state.draftValue——直接控制子组件的值。这使得数据流更加清晰和可预测。...原创 2018-12-28 17:42:28 · 490 阅读 · 0 评论 -
react-router常用api文档及路由设计模式
react-router作为强大的前端路由控件,地位突出,不过在使用过程中还是需要进行一些额外的封装,以便达到可以配置路由的目的。而要想灵活的封装路由配置模式,就需要很好的掌握react-routerApi。接下来探讨一下路由的深度封装。首先看下react-router库:4.0是多包管理react-router React Router 核心react-router-dom 用于 D...原创 2018-12-31 17:39:22 · 1358 阅读 · 0 评论 -
关于hotReplacement不起作用的bug(配置过react-hot-loader后浏览器仍然刷新的坑)
近几天搭建无刷新开发前端框架,在配置过react-hot-loader后,发现代码更新后,浏览器仍然会刷新,找了很久,发现配置都是正确的。这对于一个架构师来说是不可以容忍的,花了一天找到并解决了这个问题,react-hot-loader中隐藏着一个大坑,希望大家可以避免。用一句话总结这个bug:当你的入口组件通过解构方式引入时,即使配置了react-hot-loader后,浏览器仍会刷新更新...原创 2019-01-24 14:32:12 · 801 阅读 · 0 评论 -
命令行集成工具开发及分布式路由recdi-cli前端脚手架实例
在前端开发工程中,实现项目自动化和工程化越来越重要,而每次搭建前端项目的时候,很多文件都源自复制粘贴,这是一些重复的工作。虽然现在已经有了很多大的脚手架生成工具,像create-react-app, vue-cli,但是这些工具生成的脚手架可能和我们的业务场景相差较远,生成过后还需要手动更改,也是比较麻烦的,另外,对于自己封装的脚手架可以加入定制的东西,对于开发团队而言,扩展性较强。前端脚手架...原创 2019-02-20 00:15:32 · 226 阅读 · 0 评论 -
immutable存在的意义及基本数据结构种类和用法
学习一个新的工作或者集成库,首先要总体上了解这个工具或者库的作用,其次要知道其基本的使用方法,有哪些功能点,怎么使用这些操作。介绍immutable之前先介绍两个概念深拷贝和浅拷贝,具体参见我的另一篇文章:详解浅拷贝和深拷贝及es6对象方法的解析对于immutable:immutable是javascript的一个不可变库,主要用途是深拷贝js对象,进而确保数据是不变的。imm...原创 2019-03-15 17:57:43 · 1187 阅读 · 0 评论 -
react diff算法的三个核心约定
react diff算法加入了特定的策略让计算复杂度从传统的O(n^3)降低为 O(n).三个核心策略:1,Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计 tree diff2,拥有相同类的两个组件 生成相似的树形结构, 拥有不同类的两个组件 生成不同的树形结构。 component diff3,对于同一层级的一组子节点,通过唯一id区分 eleme...原创 2019-03-20 11:37:19 · 680 阅读 · 0 评论 -
react diff算法详解
react之所以可以快速更新dom,在于react可以对比虚拟dom,找到差异后,只更新改变的部分。diff算法有很多,比如DFS算法O(n^3) >cito.js >kivi.jsO(n^2)对于react,FB通过大胆的策略,满足了大多数的性能最大化,将O(n3)复杂度的问题成功的转换成了O(n),并且后面对于同级节点移动,牺牲一定的DOM操作,算法的复杂度也才打到...原创 2019-03-25 18:35:22 · 2091 阅读 · 0 评论 -
react上下文context怎样使用看这篇这够了
react上下文context是一个很有趣的api,一方面react官网不推荐使用,另一方面许多官方依赖在使用目前使用context的依赖包:react-redux、mobx-react、react-router、拖拽组件react-dndcontext分为新版后旧版,这里都介绍下———————————————————————————————————————————————————...原创 2018-09-11 15:45:05 · 3211 阅读 · 0 评论