关注
分享
文章平均质量分 73
ReactJs是至今为止最优雅的JavaScript框架，又由于其将Web与移动端结合，同时适用于IOS和Android，使其成为最有前途的框架。此专栏将从原理、源码和应用等多个角度深入介绍ReactJs和ReactNative的实际使用，并持续关注React的变化与生态圈的发展
loveu2000000
这个作者很懒，什么都没留下…
展开
-
React实战-一个比Redux更轻量级的state管理库（Kea）
React之所以更加模块化，有很大一部分原因在于它引入了state机制。在React开发组里最早推出的是Flux，随后又出现了Redux，在使用这些库的过程中，我们会感觉繁琐，学习曲线陡峭。Flux中event事件满天飞，Redux难以理解，并且也少不了依照其要求构建一些重复、雷同的代码，最近最新最简单的state库莫过于Kea了（微信公众号：React实战）。原创 2017-08-16 12:51:15 · 1635 阅读 · 0 评论 -
React实战-React中this的用法
Javascript中的this是一个令人讨厌的东西，对于有着面向对象编程经历的程序员来说更是如此，那么在ReactJs中，this是如何使用的呢。原创 2017-08-13 09:13:55 · 1394 阅读 · 0 评论 -
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 阅读 · 0 评论 -
React实战-如何构建扁平化的Redux数据结构
Redux采用的是单一数据源，在数据展示时，存在各种不同的展示需求，必然会有不同数据在同一页面展示，不同页面展示同一数据的情况，那么在数据的更新时，也就必然存在不一致，不同步的情况，如何构建一个扁平化的数据结构来适应这种需求呢？原创 2017-04-24 21:51:00 · 2655 阅读 · 0 评论 -
React实战-未来是属于React的
近两年，前端开发已经发生了天翻地覆的变化，涌现出很多优秀的框架，如：angular、 vue、 react等。在让前端开发人员欢呼雀跃的同时，也带来了新的问题，该选择哪个框架？以我的判断是，未来是属于React的原创 2017-04-23 21:40:47 · 3395 阅读 · 0 评论 -
React实战-Flux中嵌套action的解决方法
Flux中是不允许两个action事件嵌套在一个同步控制域里的，然而在实际应用中这样的联动操作却很多，那么我们该如何解决此类情况？原创 2017-04-22 20:17:14 · 1089 阅读 · 0 评论 -
React实战-历数一个混乱React项目的罪状
最近看到有篇文章讲述的了注释的作用，核心思想是：代码就是一切，好的代码能告诉你所有你想知道的，好的代码不需要注释。对于此类看法，我只能说部分认同，代码毕竟是深入到了细节，只有设计说明与规范的代码相结合，才能尽可能减少注释。原创 2017-04-20 14:18:16 · 2272 阅读 · 0 评论 -
React实战-Js中容易被错用的不变数据
React并没有那么突出不可变数据的应用，然而不变数据却是Function Program中核心，Redux则是完全基于Function Program的，在Redux中，我们可以自己去维护函数中的数据边界，小心翼翼的创建一个不受影响的函数式编程数据模型，也可以采用immutable这样简单的使用方式（微信：react-javascript）。但是我们依然需要对Javascript语言中的不变原创 2017-01-20 23:40:42 · 1188 阅读 · 0 评论 -
React实战-深入源码了解Redux用法之Middleware
谈到MiddleWare的由来在官方网站有清楚的说明，并且是一步一步的讲解了它的演进过程，其中中文说明见http://cn.redux.js.org/docs/advanced/Middleware.html。重点讲解了几点内容：1.为什么采用MiddleWare？综合起来看就是我们在进行业务操作时，常常会有其它的附加需求，如：所有操作的操作记录日志；操作异常的错误日志；测试过程的测试原创 2016-12-29 21:39:48 · 1396 阅读 · 0 评论 -
React实战－javascript访问服务端数据大全
React作为新的前端的开发框架，确切的说只是前端页面库。然而在整个前端应用中，数据控制，数据模型、访问服务端则具有很大的灵活性，这也是Reactjs与Angular的主要不同点之一。在数据控制和数据模型方面，主流的是采用Redux，而在服务器访问方面则没有哪个成为主流方式，你可以自己写调用方法，也可以采用第三方JS库，通常有以下几种方法：通过XMLHttpRequest对象进行访问X原创 2016-12-20 22:06:54 · 2029 阅读 · 0 评论 -
Reactjs－程序员为什么应该学习Android 开发
在使用了一段时间Reactjs后，渐渐感觉到它的局限性。Reactjs的理想是好的：只学一次，通吃Web端和移动端。也大大改进了Web端开发的杂货铺状态（html,css,js以及各类自定义语言混合），采用Reactjs让前端javascript代码如同java，C#代码一样整洁、漂亮，我喜欢！说到这一点，不免吐槽一下angular，对于angular，我了解不多，但是从我看到它的长相的第一眼就不原创 2016-12-15 00:42:30 · 1590 阅读 · 0 评论 -
React实战－Reactjs中的如何通过不可变数据对象提高页面性能
React实战－Reactjs中的如何通过不可变数据对象提高页面性能在使用ReactJs之后，我们知道Reactjs的UI更新方式，由于props或者state的数据变化都将导致页面的render，而ReactJs是组件化的，小组件组装成大组件，大组件组装成页面，每个组件都有自己的内部数据，任何的数据变化都将引起页面重绘，尽管有虚拟Dom，依然对性能存在较大的影响，不可变数据的应用大大的减少了原创 2016-10-08 23:04:18 · 3941 阅读 · 0 评论 -
React实战-如何在ReactJs中调用Google、Baidu地图
React实战-如何在ReactJs中调用Google、Baidu地图在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放的Api供大家使用，当然更具使用的功能会提供付费版和免费版，如果仅仅只是小的应用或者练手，完全可以调用其免费版。调用的方式也很简单，跟你调用其他的第三方库类似。但是由于ReactJs的实现方式存在一些特殊性，其调用Google原创 2016-10-01 23:25:33 · 12175 阅读 · 0 评论 -
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 · 8509 阅读 · 0 评论 -
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 · 5142 阅读 · 0 评论 -
React实战-深入分析ReactNative中的动画效果
React实战-深入分析ReactNative中的动画效果说起动画效果感觉回到JavaScript的起源了，在早期的Web开发中，JS更多的是扮演着页面特效的角色，当然也只是属于做些边角料的工作，真正需要动画的地方，大多还是采用Flash或者Applet，Js更多的是操作html元素的变化，如果大量采用Js,则会严重影响页面的性能。在了解ReactNative中动画之前，我们还是看看网页动原创 2016-09-24 22:26:51 · 8137 阅读 · 0 评论 -
React实战-一个非常棒的React与Material风格相结合的UI控件库（Material-UI）
React实战-一个非常棒的React与Material风格相结合的UI控件库（Material-UI）ReactJs提供了JSX、UI更新机制、组件化原则等底层支持，但是正如我们在所有的程序语言基础上搭建系统框架所面临的问题一样，很大程度上语言提供的是解析、编译、运行过程的后台调度等，真正实现一个应用往往由大量的三方控件或库完成。所以当我们长期使用一个框架后，往往陷入了框架的规则，忘记了语言原创 2016-09-21 22:35:24 · 12200 阅读 · 0 评论 -
ReactJs实战感悟
采用ReactJS实现一个完整项目的感悟原创 2016-06-22 14:05:57 · 3369 阅读 · 0 评论 -
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 阅读 · 0 评论 -
React实战-深入了解JSX
深入了解JSX一：Why is JSX各种编程语言层出不穷，每天都有新的编程语言出现，每隔一段时间，流行的编程语言将会如皇朝般更替。对于程序员来说，这是件又爱又恨的事情。语言的变化适应着科技的发展，不断优化旧的编程模式，使程序设计更加简单、合理。但目前看来这种变化过于迅速，使得程序员应接不暇，旧的语言还没有搞明白，新的语言又来了，更加令人无法沉下心来做事情，每个人想着不被技术淘汰，不被社会原创 2016-07-09 11:58:43 · 1793 阅读 · 0 评论 -
React实战-模块化条件下的6种数据传递方式
React实战-模块化条件下的6种数据传递方式当前新的前段框架中最突出就是模块化，然后模块化后，数据的传递方式与之前的方式也不尽相同，尤其是框架各自定义的方式也不一样。规则这东西归根到底是个度的问题，没有规则，就会混乱，规则多了，就死板。所以规则多少是个很难把握的东西。刚开始接触ReactJS的时候，你会觉得很别扭，一些取值、赋值的方式将违背你的习惯。还是那句话：当你在通过Dom直接取值、原创 2016-08-26 22:55:13 · 8290 阅读 · 0 评论 -
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 · 1526 阅读 · 0 评论 -
React实战-ReactJS+Redux的思考
React实战-ReactJS+Redux的思考ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经有超越ReactJs+Flux的趋势。到底哪种更好，则又是一个仁者见仁、智者见智的事了。但是无论你是否采用Redux，最好还是看看Redux的使用方式，如果能看看Redux的实现方式，将收益匪浅，那是将重构运用的令人敬佩的实际原创 2016-09-06 20:39:08 · 1814 阅读 · 0 评论 -
React实战-基于Storybook的React组件测试
React实战-基于Storybook的React组件测试ReactJs的测试方法和测试工具很多，主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便，其中StoryBook这款小工具很适合在页面UI直观的展示控件的允许效果，设置不同的运行场景。简单几步就能在网友上展示你的测试场景。1.将storybook加入项目中执行npm i --save @kadira/stor原创 2016-09-07 21:48:37 · 4272 阅读 · 0 评论 -
React实战-深入源码了解Redux用法之Connect
React实战-深入源码了解Redux用法之ConnectRedux结构并不复杂，用法也较之Flux更为简单，使得Redux成为ReactJS的标配。虽然我并不赞成用个windows就得搞清楚windows内存/线程怎么管的，用个算法函数就要知道算法怎么写的，但是如果不去看看Redux的源码，不先了解Flux的用法，在使用Redux的时候，你会感到迷惑。再者，Redux源码并不太多，但蕴含了巧原创 2016-09-09 23:26:34 · 3732 阅读 · 0 评论 -
React实战-深入源码了解Redux用法之Provider
React实战-深入源码了解Redux用法之Provider在Redux中最核心的自然是组件，以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据，而是采用Provider统一处理，省去了开发者不少工作，但是Redux到底如何将state中的数据传递给各组件的呢？还得看看Provider的源码实现。1.常用数据传递写法原创 2016-09-10 18:30:05 · 9137 阅读 · 0 评论 -
React实战-深入源码了解Redux用法之Reducers
React实战-深入源码了解Redux用法之Reducers在Redux中Reducers是真正实现state数据变化的工作。我们在使用Redux时，可能也只是似懂非懂，我们不知道它是如何工作的，我们知道在Action中定义事件，在Reducers中定义对应事件对应的操作，我们知道他们有关系，但如何建立的关系不知道。1.Flux中事件的定义还是看看Flux中是如何定义的吧，在Flux中原创 2016-09-12 22:34:32 · 1412 阅读 · 0 评论 -
React实战-通过ToDo源码分析Redux的数据模型设计
React实战-通过ToDo源码分析Redux的数据模型设计计算机技术的本质是数据处理，在各种编程语言、编程框架中，数据模型都是首要考虑的事情。我们都知道在Redux中采用的是单一数据模型，整个应用中只存在store中唯一的state数据对象。但是如何在这个原则下设置自己的数据模型，细则的处理方式依然需要进一步分析。1.程序中对数据的处理主要方式：a.对单一数据对象操作b.获取数据原创 2016-09-14 20:26:11 · 893 阅读 · 0 评论 -
React实战-通过ReactRouter-example分析Router用法
React实战-通过ReactRouter-example分析Router用法在我们了解完一种新的Web框架或者语言后，总是从各个单个的知识点了解，做着一个一个Demo,等到我们开始去做一个项目或产品时，需要解决的问题又趋于相同。我们常常感叹使用C\C++,Java、C#等各种不同的语言，解决问题的方式也趋于一致。我们在搭建用户UI首先需要解决的是界面的导航问题，解决的方式当然有很多种，然原创 2016-09-15 21:21:38 · 1778 阅读 · 0 评论 -
React实战-如何快速创建调试一个Demo程序
React实战-如何快速创建调试一个Reactdemo程序React是单一页面程序，因此需要我们在创建React项目时需要做很多配置、解析等工作，严重影响着我们在编写demo时的情绪和效率。通常的方式我们需要做以下几步：1. 创建配置文件package.json。定义项目所需的React程序包：{ "name": "routerdemo", "version": "原创 2016-09-16 12:27:00 · 6505 阅读 · 0 评论 -
React实战-如何快速构建一个ReactNative的Demo
React实战-如何快速构建一个ReactNative的DemoReactJs宣称的是一次学习就够了，意思是学习了ReactJs后，在Web端和移动端就都一样处理了。事实是否真的是这样呢？在实际的应用过程中会发现，现实并非如口号叫的那么好听，但也并非完全从头学起，但是在学会了ReactJs后，开始编写ReactNative的过程中，由于对原理了解并不深刻，会遇到各种坑。如果不扫清这些坑，会让你原创 2016-09-19 21:00:30 · 1912 阅读 · 0 评论 -
React实战-对比ReactJs与ReactNative中的Flex用法
React实战-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解决了很大的问题，我们不要再设置如此多的float,为个元素居中伤透脑筋，以至网上出现有9种元素居中的做法，跟茴香豆的茴有4种写法一样，自从出现flex后，页面布局就变的轻松多了。但是ReactNative与ReactJs中原创 2016-09-20 21:37:17 · 3751 阅读 · 0 评论