探索React源码的全局模块系统

也可以在这里看:https://leozdgao.me/react-global-module-system/ 扫了几眼react的源代码(0.14-stable分支),发现一个有趣的现象,比如如下这段代码: var ReactDOM = require('ReactDOM'); var ReactDOMServer = require('ReactDOMServer'); var ReactIsomorphic = require('ReactIsomorphic'); var assign = require('Object. »

初识React中的High Order Component

我们都知道,如果使用ES6 Component语法写React组件的话,mixin是不支持的。而mixin作为一种抽象和共用代码的方案,许多库(比如react-router)都依赖这一功能,自己的项目中可能都或多或少有用到mixin来尽量少写重复代码。 如果希望使用ES6 Component,有希望可以用一个像mixin一样的方案的话,可以使用react-mixin这样的库,就有种hack的感觉。这里介绍一个新的方案:High Order Component。 什么是High Order Component? High Order Component,下面统一简称为HOC。我理解的HOC实际上是这样一个函数: »

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( »

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

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