自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(39)
  • 收藏
  • 关注

原创 React实战-一个比Redux更轻量级的state管理库(Kea)

React之所以更加模块化,有很大一部分原因在于它引入了state机制。在React开发组里最早推出的是Flux,随后又出现了Redux,在使用这些库的过程中,我们会感觉繁琐,学习曲线陡峭。Flux中event事件满天飞,Redux难以理解,并且也少不了依照其要求构建一些重复、雷同的代码,最近最新最简单的state库莫过于Kea了(微信公众号:React实战)。

2017-08-16 12:51:15 1632

原创 React实战-React中this的用法

Javascript中的this是一个令人讨厌的东西,对于有着面向对象编程经历的程序员来说更是如此,那么在ReactJs中,this是如何使用的呢。

2017-08-13 09:13:55 1391

原创 React实战-FB最新开源Javascript优化利器Prepack

长久以来Javascript缺乏一个完善的IDE,究其原因无非是Javascript一直以来就不是主角,它要么是Java,Asp等语言的装饰品,要么需要与css,html等语言结合共同完成一项功能。但是Node,React的兴起将改变这种状态,在React生态圈里,各类工具链逐步新起,最近这几天,最令人兴奋的要算是Prepack了。Facebook开源的新的Javascript代码优化工具。1

2017-05-11 22:51:33 992

原创 React实战-如何构建扁平化的Redux数据结构

Redux采用的是单一数据源,在数据展示时,存在各种不同的展示需求,必然会有不同数据在同一页面展示,不同页面展示同一数据的情况,那么在数据的更新时,也就必然存在不一致,不同步的情况,如何构建一个扁平化的数据结构来适应这种需求呢?

2017-04-24 21:51:00 2655

原创 React实战-未来是属于React的

近两年,前端开发已经发生了天翻地覆的变化,涌现出很多优秀的框架,如:angular、 vue、 react等。在让前端开发人员欢呼雀跃的同时,也带来了新的问题,该选择哪个框架?以我的判断是,未来是属于React的

2017-04-23 21:40:47 3395

原创 React实战-Flux中嵌套action的解决方法

Flux中是不允许两个action事件嵌套在一个同步控制域里的,然而在实际应用中这样的联动操作却很多,那么我们该如何解决此类情况?

2017-04-22 20:17:14 1088

原创 React实战-历数一个混乱React项目的罪状

最近看到有篇文章讲述的了注释的作用,核心思想是:代码就是一切,好的代码能告诉你所有你想知道的,好的代码不需要注释。对于此类看法,我只能说部分认同,代码毕竟是深入到了细节,只有设计说明与规范的代码相结合,才能尽可能减少注释。

2017-04-20 14:18:16 2271

原创 React实战-Js中容易被错用的不变数据

React并没有那么突出不可变数据的应用,然而不变数据却是Function Program中核心,Redux则是完全基于Function Program的,在Redux中,我们可以自己去维护函数中的数据边界,小心翼翼的创建一个不受影响的函数式编程数据模型,也可以采用immutable这样简单的使用方式(微信:react-javascript)。但是我们依然需要对Javascript语言中的不变

2017-01-20 23:40:42 1186

原创 从零开始学习Android 开发笔记-Activity生命周期

Activity是Android系统中最重要的组件,各个状态转换也存在一些模糊的界限,哪个操作具体放在哪个事件中需要根据Acitvity的状态特点和业务需要来定,并非只能放着一个地方,仁者见仁、智者见智了

2017-01-10 20:38:58 895

原创 React实战-深入源码了解Redux用法之Middleware

谈到MiddleWare的由来在官方网站有清楚的说明,并且是一步一步的讲解了它的演进过程,其中中文说明见http://cn.redux.js.org/docs/advanced/Middleware.html。重点讲解了几点内容:1.为什么采用MiddleWare?综合起来看就是我们在进行业务操作时,常常会有其它的附加需求,如:所有操作的操作记录日志;操作异常的错误日志;测试过程的测试

2016-12-29 21:39:48 1396

原创 从零开始学习Android开发-创建第一个App

学习软件开发,最直接最快捷的就是尽快动手创建第一个HelloWorld程序。当我们看到Hello World出现在应用中的那一刻,我们和这门语言,或者说这么工具的距离感会突然间变得亲切。如同我们学习别的语言一样,我在最开始不太喜欢采用庞大的IDE创建第一个项目。还好我对Java语言很熟悉,还好采用Android Studio创建向导与VC++,Eclipse等并没有什么不同,在配置好Andro

2016-12-21 22:02:04 5899

原创 React实战-javascript访问服务端数据大全

React作为新的前端的开发框架,确切的说只是前端页面库。然而在整个前端应用中,数据控制,数据模型、访问服务端则具有很大的灵活性,这也是Reactjs与Angular的主要不同点之一。在数据控制和数据模型方面,主流的是采用Redux,而在服务器访问方面则没有哪个成为主流方式,你可以自己写调用方法,也可以采用第三方JS库,通常有以下几种方法:通过XMLHttpRequest对象进行访问X

2016-12-20 22:06:54 2028

原创 从零开始学习Android开发-Android概览

没有开发过Android、IOS等移动端的开发,记录从零开始学习Android开发历程。学过、用过那么多的语言、开发模式却很少留下记录,一方面是由于曾经的工作环境影响,网络受控;一方面是自己长久以来对文字的尊重,总以为非深思熟虑不能成文,非别具匠心不可以发表;还有就是自己的懒惰,懒得动笔。人的状态总还是多少受环境影响的,时得清闲,又对Android有几分兴趣,虽然Android已经发展多年,现

2016-12-19 21:56:30 1315

原创 Reactjs-程序员为什么应该学习Android 开发

在使用了一段时间Reactjs后,渐渐感觉到它的局限性。Reactjs的理想是好的:只学一次,通吃Web端和移动端。也大大改进了Web端开发的杂货铺状态(html,css,js以及各类自定义语言混合),采用Reactjs让前端javascript代码如同java,C#代码一样整洁、漂亮,我喜欢!说到这一点,不免吐槽一下angular,对于angular,我了解不多,但是从我看到它的长相的第一眼就不

2016-12-15 00:42:30 1589

原创 React实战-Reactjs中的如何通过不可变数据对象提高页面性能

React实战-Reactjs中的如何通过不可变数据对象提高页面性能在使用ReactJs之后,我们知道Reactjs的UI更新方式,由于props或者state的数据变化都将导致页面的render,而ReactJs是组件化的,小组件组装成大组件,大组件组装成页面,每个组件都有自己的内部数据,任何的数据变化都将引起页面重绘,尽管有虚拟Dom,依然对性能存在较大的影响,不可变数据的应用大大的减少了

2016-10-08 23:04:18 3940

原创 React实战-如何在ReactJs中调用Google、Baidu地图

React实战-如何在ReactJs中调用Google、Baidu地图在这个互联网时代,对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放的Api供大家使用,当然更具使用的功能会提供付费版和免费版,如果仅仅只是小的应用或者练手,完全可以调用其免费版。调用的方式也很简单,跟你调用其他的第三方库类似。但是由于ReactJs的实现方式存在一些特殊性,其调用Google

2016-10-01 23:25:33 12175

原创 React实战-ReactJs与传统Web页面中Css的使用差异

React实战-ReactJs与传统Web页面中Css的使用差异网页的布局、颜色、形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异,我们可以定义特定的样式类名,也可以正对Html元素定义样式。差异主要在React对Css的使用上:l 引用的差异:

2016-09-28 21:48:18 8507

原创 React实战-React标配单元测试工具Jest

React实战-React标配单元测试工具Jest目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是:Painless JavaScript Testing。是Facebook用于测试服务和Re

2016-09-27 21:34:02 5141

原创 React实战-深入分析ReactNative中的动画效果

React实战-深入分析ReactNative中的动画效果说起动画效果感觉回到JavaScript的起源了,在早期的Web开发中,JS更多的是扮演着页面特效的角色,当然也只是属于做些边角料的工作,真正需要动画的地方,大多还是采用Flash或者Applet,Js更多的是操作html元素的变化,如果大量采用Js,则会严重影响页面的性能。在了解ReactNative中动画之前,我们还是看看网页动

2016-09-24 22:26:51 8135

原创 软件测试感悟

软件测试感悟多年来一直从事着软件工程方面的研究与实践工作,软件测试则是其中很重要的研究方向。个人一直在软件测试与软件开发间徘徊,有时软件测试与软件开发的界线并不明显,长久以来软件测试一直视为项目开发中的无用功,软件测试人员也被低看一等,近年来有很大改观,出现了测试开发的岗位,工资待遇也与开发人员相差无几,自然也给测试人员出了一口恶气,开始宣称测试与开发同等地位。在我个人看来,中国目前的软件测试

2016-09-21 23:11:23 2686

原创 React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI)

React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI)ReactJs提供了JSX、UI更新机制、组件化原则等底层支持,但是正如我们在所有的程序语言基础上搭建系统框架所面临的问题一样,很大程度上语言提供的是解析、编译、运行过程的后台调度等,真正实现一个应用往往由大量的三方控件或库完成。所以当我们长期使用一个框架后,往往陷入了框架的规则,忘记了语言

2016-09-21 22:35:24 12196

原创 React实战-对比ReactJs与ReactNative中的Flex用法

React实战-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端,让人花费大量精力和时间的是页面布局,在新Css3中提供了flex为我们解决了很大的问题,我们不要再设置如此多的float,为个元素居中伤透脑筋,以至网上出现有9种元素居中的做法,跟茴香豆的茴有4种写法一样,自从出现flex后,页面布局就变的轻松多了。但是ReactNative与ReactJs中

2016-09-20 21:37:17 3751

原创 React实战-如何快速构建一个ReactNative的Demo

React实战-如何快速构建一个ReactNative的DemoReactJs宣称的是一次学习就够了,意思是学习了ReactJs后,在Web端和移动端就都一样处理了。事实是否真的是这样呢?在实际的应用过程中会发现,现实并非如口号叫的那么好听,但也并非完全从头学起,但是在学会了ReactJs后,开始编写ReactNative的过程中,由于对原理了解并不深刻,会遇到各种坑。如果不扫清这些坑,会让你

2016-09-19 21:00:30 1912

原创 React实战-如何快速创建调试一个Demo程序

React实战-如何快速创建调试一个Reactdemo程序React是单一页面程序,因此需要我们在创建React项目时需要做很多配置、解析等工作,严重影响着我们在编写demo时的情绪和效率。通常的方式我们需要做以下几步:1. 创建配置文件package.json。定义项目所需的React程序包:{  "name": "routerdemo",  "version": "

2016-09-16 12:27:00 6504

原创 React实战-通过ReactRouter-example分析Router用法

React实战-通过ReactRouter-example分析Router用法在我们了解完一种新的Web框架或者语言后,总是从各个单个的知识点了解,做着一个一个Demo,等到我们开始去做一个项目或产品时,需要解决的问题又趋于相同。我们常常感叹使用C\C++,Java、C#等各种不同的语言,解决问题的方式也趋于一致。我们在搭建用户UI首先需要解决的是界面的导航问题,解决的方式当然有很多种,然

2016-09-15 21:21:38 1778

原创 React实战-通过ToDo源码分析Redux的数据模型设计

React实战-通过ToDo源码分析Redux的数据模型设计计算机技术的本质是数据处理,在各种编程语言、编程框架中,数据模型都是首要考虑的事情。我们都知道在Redux中采用的是单一数据模型,整个应用中只存在store中唯一的state数据对象。但是如何在这个原则下设置自己的数据模型,细则的处理方式依然需要进一步分析。1.程序中对数据的处理主要方式:a.对单一数据对象操作b.获取数据

2016-09-14 20:26:11 893

原创 React实战-深入源码了解Redux用法之Reducers

React实战-深入源码了解Redux用法之Reducers在Redux中Reducers是真正实现state数据变化的工作。我们在使用Redux时,可能也只是似懂非懂,我们不知道它是如何工作的,我们知道在Action中定义事件,在Reducers中定义对应事件对应的操作,我们知道他们有关系,但如何建立的关系不知道。1.Flux中事件的定义还是看看Flux中是如何定义的吧,在Flux中

2016-09-12 22:34:32 1411

原创 React实战-深入源码了解Redux用法之Provider

React实战-深入源码了解Redux用法之Provider在Redux中最核心的自然是组件,以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据,而是采用Provider统一处理,省去了开发者不少工作,但是Redux到底如何将state中的数据传递给各组件的呢?还得看看Provider的源码实现。1.常用数据传递写法

2016-09-10 18:30:05 9133

原创 React实战-深入源码了解Redux用法之Connect

React实战-深入源码了解Redux用法之ConnectRedux结构并不复杂,用法也较之Flux更为简单,使得Redux成为ReactJS的标配。虽然我并不赞成用个windows就得搞清楚windows内存/线程怎么管的,用个算法函数就要知道算法怎么写的,但是如果不去看看Redux的源码,不先了解Flux的用法,在使用Redux的时候,你会感到迷惑。再者,Redux源码并不太多,但蕴含了巧

2016-09-09 23:26:34 3730

原创 React实战-基于Storybook的React组件测试

React实战-基于Storybook的React组件测试ReactJs的测试方法和测试工具很多,主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便,其中StoryBook这款小工具很适合在页面UI直观的展示控件的允许效果,设置不同的运行场景。简单几步就能在网友上展示你的测试场景。1.将storybook加入项目中执行npm i --save @kadira/stor

2016-09-07 21:48:37 4271

原创 React实战-ReactJS+Redux的思考

React实战-ReactJS+Redux的思考ReactJs的官方架构是:ReactJs+Flux。然而作为Flux的升级版,ReactJs+Redux越来越流行,已经有超越ReactJs+Flux的趋势。到底哪种更好,则又是一个仁者见仁、智者见智的事了。但是无论你是否采用Redux,最好还是看看Redux的使用方式,如果能看看Redux的实现方式,将收益匪浅,那是将重构运用的令人敬佩的实际

2016-09-06 20:39:08 1813

原创 React实战-如何构建React+Flux+Superagent的完整框架

React实战-如何构建React+Flux+Superagent的完整框架ReactJS并不像angular一样是一个完整的前端框架,严格的说它只是一个UI框架,负责UI页面的展示,如果用通用的框架MVC来说,ReactJs只负责View了,而Angular则是一个完整的前端框架,包含了MVC的全部。那么问题来了,采用ReactJS时,M和C怎么办了,其实不仅是M和C的问题,包括UI控件的如

2016-08-30 17:09:12 1525

原创 React实战-模块化条件下的6种数据传递方式

React实战-模块化条件下的6种数据传递方式当前新的前段框架中最突出就是模块化,然后模块化后,数据的传递方式与之前的方式也不尽相同,尤其是框架各自定义的方式也不一样。规则这东西归根到底是个度的问题,没有规则,就会混乱,规则多了,就死板。所以规则多少是个很难把握的东西。刚开始接触ReactJS的时候,你会觉得很别扭,一些取值、赋值的方式将违背你的习惯。还是那句话:当你在通过Dom直接取值、

2016-08-26 22:55:13 8290

翻译 Java核心面试题

Java核心面试题原文地址:http://javahungry.blogspot.com/2013/06/top-25-most-frequently-asked-core-java.htmlhttps://www.toptal.com/java/interview-questionshttps://blog.udemy.com/java-interview-questions/

2016-08-26 21:19:45 739

翻译 你必须知道的25道JavaScript核心面试题

25道核心JavaScript面试题原文地址:https://www.toptal.com/javascript/interview-questions在多年的程序设计生涯里,我常常面临着各种新的语言,新的工具。但是语言、工具最终也仅仅为工具,最终目的是分析问题,解决问题。虽然常年在一个领域,一种语言里摸爬滚打,可能对语言本身的理解更为深刻,即使是有意识的去系统、全面的学习了解这种语言的,

2016-08-04 21:59:13 7550

原创 React实战-深入了解JSX

深入了解JSX一:Why is JSX各种编程语言层出不穷,每天都有新的编程语言出现,每隔一段时间,流行的编程语言将会如皇朝般更替。对于程序员来说,这是件又爱又恨的事情。语言的变化适应着科技的发展,不断优化旧的编程模式,使程序设计更加简单、合理。但目前看来这种变化过于迅速,使得程序员应接不暇,旧的语言还没有搞明白,新的语言又来了,更加令人无法沉下心来做事情,每个人想着不被技术淘汰,不被社会

2016-07-09 11:58:43 1793

原创 ReactJs实战-让人沮丧的HelloWorld

学习任何一门语言我们写出的第一个Demo,应该是Hello world了。相信第一个具有自主思想的智能机器人开口第一句话应该就是:Hello world, Human, Fuck you!为什么取名为让人沮丧的Hello World?这也是我在学习、使用ReactJs过程中的感受。Hello World程序让我们了解一门新语言的基本结构、框架和运行方式。C、Java、C#等语言的Hel

2016-06-24 22:16:44 2308

原创 ReactJs实战感悟

采用ReactJS实现一个完整项目的感悟

2016-06-22 14:05:57 3368

原创 云淡风清

不知何时,雾霾已经占据了北京人心里的大部分空间。以前还不太理解中国人见面,问候的是:吃饭了吗?英国人却是:今天天气不错哦!现在理解了,也接受了,平常见面把吃饭的问候也改成天气了。离开了工作十来年的公司,经历一个不长不短的旅行,重新走入职场。前公司就在家门口,开车5分钟,走路15分钟,风雨、交通与我并不相干。在一个地方待的够久了,能待这么久让人惊讶,待这么久走了也让人惊讶。然而选择总是痛苦的,得

2016-06-21 21:42:23 366

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除