React
文章平均质量分 70
胖猫的夏天
偶尔写写地图,偶尔写写前端
展开
-
Redux源码浅析系列(三):`compose `
compose实际上是一个函数式编程中的写法,表示从右向左组合多个函数。为了方便,被放到了redux里面来。当我们需要将多个storeEnhancers依次执行的时候,就需要用到它。下面,我们来看一下它的用法: compose(...funcs)funcs 表示 需要合成的多个函数。预计每个函数都接收一个参数。它的返回值将作为一个参数提供给它左边的函数,以此类推。最右边的参数可以接受...原创 2018-02-10 13:11:14 · 403 阅读 · 0 评论 -
Redux源码浅析系列(二):`combineReducer`
上一章,我们讲解了createStore。下面,我们来看一下combineReducer。 在redux中,我们禁止在应用中创建多个store(我们这里默认讨论的都是客户端应用,同构应用不适用这条规则)。然而,随着应用变得越来越复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。combineReducer就是将一个由多个reducer函数作为...原创 2018-02-10 12:44:46 · 2436 阅读 · 0 评论 -
Redux源码浅析系列(一):`CreateStore`
使用react+redux开发有一段时间了,刚开始使用并没有深入了解其源码,最近静下心来,阅读了一下,感触颇深。 本系列主要从createStore,combineReducer,compose,applyMiddleware几个方面进行讲解。本系列不会详细讲解redux的用法,因此可能更适合有redux使用经验的小伙伴们阅读。store是redux中用来存储所有state树的一个对象,改变...原创 2018-02-10 12:22:40 · 815 阅读 · 0 评论 -
IIS 8 开启 GZIP压缩来减少网络请求的消耗
什么是gzipgzip是GUNzip的缩写,最早应用于unix系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器端和客户端必须同时支持gzip。目前主流的浏览器都支持该协议,常见的服务器Apache,Nginx,IIS也都支持gzip。 gzip通过对文件中相似的部分进行替换压缩,压缩比率通常在3到10倍左右,可以大大的减少服务器的带宽。在实际应...原创 2018-01-30 21:25:13 · 4682 阅读 · 0 评论 -
webpack打包之后的文件过大的解决方法
以前一直使用create-react-app这个脚手架进行react开发,后面因为一些自定义的配置,转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理webpack打包之后文件太大的情况,简单记录下来。首先配置全局变量首先,通过指定环境,告诉webpack我们当前处于production环境中,要按照p原创 2018-01-30 20:47:32 · 19427 阅读 · 1 评论 -
深入浅出React之第七章:使用React-Router实现多页面应用
现实中,应用往往包含很多功能,这些功能无法通过一个页面展示,所以应用往往是‘多页面应用’。而且,用户在这些页面之间来回切换,开发者要做的就是保证用户的操作顺畅。最好的解决办法就是虽然逻辑上是‘多页面应用’,但是页面之间的切换并不引起页面刷新,实际上是‘单页面应用’。1. 传统的多页面实现方式如果使用传统的多页面实现方式,那么每次页面切换都是一次网页刷新,每次页面切换都遵循以下步骤:浏览器的地址栏发原创 2017-10-09 00:44:15 · 13114 阅读 · 1 评论 -
深入浅出React之第六章:Redux和服务器通信
无论是React还是Redux,工作方式都是依靠数据驱动,在开发过程中,应用数据往往存储在数据库中,通过一个api服务器暴露出来,网页应用要获取数据,就需要与服务器进行通信。1.React组件访问服务器我们先来看一下一些比较简单的场景,在一些比较简单的应用中,我们可能只需要使用react,而不使用redux之类的数据管理框架,这时候react组件自身也可以担当起和服务器通信的职责。有很多JavaSc原创 2017-10-09 00:42:43 · 2766 阅读 · 2 评论 -
深入浅出React之第二章:如何设计高质量的react组件
如何设计高质量的react组件?易于维护的高质量组件的设计要素一个组件最好只做一件事,并做好组件的prop和statereact组件的数据分为两种,prop和state。无论哪一个属性改变都会引起组件的重新渲染。那么,在设计一个组件的时候,什么时候选用prop,什么时候选用state呢?原则很简单:prop是对外的接口,state是组件的内部状态。2.1 react的prop在react中,pr原创 2017-10-09 00:32:15 · 643 阅读 · 0 评论 -
深入浅出React之第一章:DOM,也许不是答案
react,新的前端思维方式react的首要思想是通过组件来开发应用。所谓组件,简单的来说就是能完成某个特定功能的、独立的、可重用的代码。通过基于组件的开发模式,把一个大的应用分解成若干小的组件,每个组件只关注于某个小范围的特定功能,但是把组件组合起来,就能够构成一个功能庞大的应用。如果分解功能的过程做的十分巧妙,那么每个组件都可以在不同的场景下面重用,那样不仅可以构建出一个庞大的应用,还可以构建原创 2017-10-09 00:29:04 · 655 阅读 · 0 评论 -
深入浅出React之第五章:React组件的性能优化
1.单个React组件的性能优化react是通过Virtual DOM来提高渲染性能,虽然每一次页面更新都是对组件的重新渲染,但是并不是将之前渲染的内容全部抛弃重来,而是通过借助Virtual DOM,计算出对DOM树的最小修改。这就是为什么React在默认情况下渲染都很快速的原因。不过,虽然Virtual DOM能够将每次DOM的修改量减少到最少,但是计算和比较Virtual DOM依然是一个很复原创 2017-10-09 00:38:53 · 802 阅读 · 0 评论 -
深入浅出React之第四章:推荐的Redux目录结构
1.传统的MVC目录结构在MVC中,应用代码分为Controller,Model,View,分别代表三种模块角色,就是把所有的Controller代码放在controller文件夹下,把所有的Model代码放在model文件夹下,把View代码放在view文件夹下。 如下所示:src/ controllers todoController.js filte原创 2017-10-09 00:36:08 · 4544 阅读 · 0 评论 -
深入浅出React之第三章:使用redux管理应用状态
Redux在前面,我们已经介绍了完全使用react来管理应用数据的麻烦,下面我们将要介绍redux这种管理应用状态的框架。 1. Reduxredux的三大基本原则:唯一数据源保持状态只读数据改变只能通过纯函数来完成下面,我们来具体看一下这个三个基本原则。唯一数据源唯一数据源指的是应用的状态数据应该只存储在唯一的一个store上。这个唯一store上的状态,是一个树形的对象,每个组件往往只原创 2017-10-09 00:34:53 · 3047 阅读 · 0 评论 -
react diff算法浅析
diff算法作为Virtual DOM的加速器,其算法的改进优化是React整个界面渲染的基础和性能的保障,同时也是React源码中最神秘的,最不可思议的部分1.传统diff算法计算一棵树形结构转换为另一棵树形结构需要最少步骤,如果使用传统的diff算法通过循环递归遍历节点进行对比,其复杂度要达到O(n^3),其中n是节点总数,效率十分低下,假设我们要展示1000个节点,那么我们就要依次执行上十亿次原创 2017-09-26 22:07:00 · 20049 阅读 · 0 评论 -
Redux源码浅析系列(四):`applyMiddleware`
前面主要介绍了createStore,combineReducers,compose的实现原理,下面,我们看一下 redux中最有意思的中间件部分applyMiddleware。 applyMiddleware代码很简洁,但是含义很广泛。我们来一起看一下:首先,我们先来重温一下中间件的使用方法:调用中间件 来看一下createStore的源码if (typeof prelo...原创 2018-02-10 14:19:41 · 643 阅读 · 3 评论