React和Redux的连接react-redux

之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。 之前仅通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是v0.14.x。 react-redux提供两个关键模块: »

对Redux实践中数据请求的一些想法

最近工作之余在写一个SPA的项目,用React+Redux做一个团队协作系统,面向目前的这个项目组的。 这篇文章更像是一篇随笔,比较随性一点,更深入的总结,以及项目演示什么的,以后完成了项目了再来写。 下面基本没怎么贴代码,如果对这个项目有兴趣的话,Github地址如下:https://github.com/leozdgao/chatbox 回到正题,之前自己一个玩具项目里遇到过一个坑,没填上,就是tag切换的时候,获取对应tag的数据,在前一个请求没有完成的情况下快速切换tag,又一个请求出去了,这两个请求可能发生竞争,导致页面上呈现错误的数据。 »

React中的Portal组件

几个月前遇到了写模态窗(modal)的需求,当初其实没什么思路,不知道怎么用更React的方式实现模态窗,于是去学习了下ReactBootstrap的源代码,发现了一个Portal组件,通过这个Portal的概念实现了React式的模态窗,诸如tooltip或者是notification等组件也是同样的道理。最近在看React-conf的视频时又听到Ryan提到,最近重新回去看ReactBootstrap的源代码,发现其实变化挺大的,原先Portal的部分已经被抽象出了另一个库react-overlays,于是准备总结下这个部分。 模态窗的实现思路 模态窗扮演这相当于桌面应用的MessageBox的角色,各个浏览器对这个部分的支持有些缺陷(这里指alert或confirm这些),比如每个浏览器实现效果有差异、用户可以禁止其显示,还有最重要的是没有办法灵活控制。 于是我们自己来实现,要扮演一个MessageBox,那么我们希望一个modal应该是永远被置于顶层的,而又由于Stacking Context的关系( »

了解一个React组件

最近React,这个专注View层的库格外火热,我个人已经探索了一段时间,本来一直想写一些文字,总结下React应用开发和webpack构建工具的经验。不过懒癌复发,一直没动笔。前段时间给团队安利这个库,现在要开始用它写项目了,所以自己挖的坑要填上,就开始写一些基本的东西,就先从介绍React组件的基础开始。 从一个简单的组件开始 标题叫“一个简单的组件”,于是先来看下官方网站上一个叫做“A Simple Component”的例子来感受下: var HelloMessage = React.createClass({ render: function( »

【译】超快的HTML——Elm中的Virtual DOM

原文链接 新的elm-html库让你可以直接在Elm中使用HTML和CSS。想用flexbox?想继续使用现有的样式表?Elm现在都可以做到并速度很快。比如,重新写了一个TodoMVC应用,代码很简单并且初步的benchmarks展示了它比同类项目更快。 elm-html和Mercury项目都是基于virtual-dom这个项目的,它提供了很棒的性能。本文的前半部分将探索“virtual DOM ”意味着什么,以及纯净性(purity)和不可变性(immutability)是如何使它变得很快的。也解释了为什么Om,Mercury和Elm成绩出色。 性能是一方面,不过真正的好处在于这个方式让代码变的易于理解和维护。简单的说,它让创建可重用的HTML组件和抽象通用模式变的很容易。这也是为什么那些有着较大codebase的人应该会对virtual »

遇到的em计算上的坑

1、浏览器的默认字体大小是16px 2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 3、如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 那么元素设置了字体大小, »

如何科学的组织React组件样式

React的组件式开发,让我们可以利用其Component Model,专注于单个组件的逻辑开发,其中还包括组织组件的样式。先声明,本文并不是webpack配置教程,不会介绍详细的配置过程,假设你们已经用过了css-loader style-loader extract-text-webpack-plugin。 正在使用的方式 我们理想中的文件结构可能会是这样的: - components - modal - modal.jsx - modal.css // 可以是任意预处理器 - dropdown »

Stacking Content层叠上下文

层叠上下文,就是在呈现的时候决定哪个元素在上、哪个元素在下,初学的时候觉得这东西应该就是跟z-index的大小有关,然而并没有这么简单,我们来感受下。 什么是Stacking Content 在一个层叠上下文,所有的元素根据规则从下到上排列,该规则如下: - 创建该层叠上下文的元素的background以及border - 设置z-index小于0的元素 - 正常流中的元素(z-index的值为auto) - 浮动的非定位元素 - 定位元素(根据z-index由小到大排) 首先对于z-index这个属性,需要注意的是,它仅对定位元素有效, »