2016年09月_loveu2000000

原创 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 8526

原创 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 5172

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

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

2016-09-24 22:26:51 8161

原创软件测试感悟

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

2016-09-21 23:11:23 2706

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

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

2016-09-21 22:35:24 12285

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

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

2016-09-20 21:37:17 3769

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

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

2016-09-19 21:00:30 1927

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

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

2016-09-16 12:27:00 6545

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

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

2016-09-15 21:21:38 1794

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

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

2016-09-14 20:26:11 905

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

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

2016-09-12 22:34:32 1431

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

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

2016-09-10 18:30:05 9153

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

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

2016-09-09 23:26:34 3738

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

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

2016-09-07 21:48:37 4305

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

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

2016-09-06 20:39:08 1865

超期服役软件开发者的博客