10:54:20 UTC
我们上个月完成一个完全基于React做的单页应用（个人认为是业界第一个基于React的业务系统）我从去年11月接触到了React，喜欢的一发不可收拾，迅速决定用它来做我们的系统
物联网业务系统和互联网结合
4个月开发周期，从无到上线
开发工具Atom + 大量插件（eslint,gitplus,react.....) + github
打包 es6 + Webpack + less
使用了HapiJs作为模拟server，前端开发和后端彻底分离，后期集成时，使用了自己开发的代理服务器调用真正的API
运行库 React + Flux + React-router+ material-ui + ImmutableJS + 自己研发的控件
单测环境 Karma+mocha+chai+Istanbul
布局完全用flex
个人的一点体会
使用Flex布局会大大降低CSS的难度
使用Flux可以很好的隔离业务（我们的业务逻辑都在Store里）,大大降低了单元测试的难度
基于React的控件（这里说的是基本控件）是对React理解的一个体现
尽量把React组件（Component）做到小，做到细，也就是尽量拆分React组件
基于数据驱动的方式（Data-Driven）开发，理解到这一点就会发现React很神奇，可能这也是最不好理解的地方
ImmutableJS带来了大量的好处，所有组件都使用了ShouldComponentUpdate来优化
实现了I18N的动态加载
使用了Url来保存Router信息，没有使用Hash，感觉很简洁
存在的一些问题
Flux的循环调用问题，可能是一个弊端，但是，总是可以让我们重新思考，我们这样的流程是否完全必要，还是有逻辑不清晰的地方。我遇到过几次循环调用的问题，最终都能通过不使用setTimeout来解决
还是存在一些冗余的代码，个人认为还是需要引入Model层（虽然我们没有这么做），因为我们是做的数据驱动，所以，有些model内容的验证（如表单验证）可能做在Model里会好些
还需要改进的地方
Webpack打包的size还是有些大，可能代码有些冗余
WebSocket应该在后续加入系统，可能使用Socket.io
CSS可能还是需要规范，主要参考BEM,OOCSS等规范
增加更多的动画效果
开发一套属于自己的组件库，逐步抛弃material-ui库
总的来说，React确实大大提升了我们的开发效率，而且并没有降低运行效率。所以严重推荐大家使用。现在，整个团队都很熟悉了React，后面可能会做一些开源的组件。
11:25:10 UTC
希望楼主分享一下基本的项目框架。包括路由转场 以及页面之间数据的组织
12:18:14 UTC
赶紧出个教程分享一下~
14:42:30 UTC
分享部分源代码吧，呵呵呵，借鉴老师的经验
14:43:49 UTC
我感觉ImmutableJS用不起来啊，请老师指导一下?给个小示例吧
03:31:34 UTC
03:58:30 UTC
"逐步抛弃material-ui库"----material-ui很不错啊，抛弃的原因是？
08:15:00 UTC
因为很多控件用不到啊，而且我们的设计师也有创新，所以很多地方使用了强制css来修改
08:15:30 UTC
其实很方面，它的文档很清晰，不知道你是哪里不清楚
08:18:52 UTC
我个人不是很喜欢写字，所以，大规模的教程可能不会有
08:29:21 UTC
先驱！祝你们开发多多的基于react的组件
14:09:25 UTC
能说细点吗？对比一下优势和成本之间
04:15:34 UTC
Flux的循环调用问题
这个是什么问题？因为store之间有依赖吗？一般来说store之间不应该有依赖的，要么就合并，要么就通过action来分离
04:57:46 UTC
求推荐 Atom 下开发 ReactJs 的扩展~
03:09:26 UTC
看了半天，感觉怎么这么熟悉。一看名字，算是遇到熟人了。
12:35:06 UTC
恩, 我最近也在参与react 项目.项目主体基调是 reactjs + reflux + webpack + babel.js 解析 es6 + 轻量grunt 任务 + less + eslint 语法检测.如果遇到坑, 再来请教楼主咯.顺便贴一段 es6 / 7? 代码 , 表示 es6文档和babel.js 文档都没有见过.
'use strict';
export default function hostnameFromUrl (str: string ): string {
let url = document.createElement ('a');
url.href = /^(f|ht )tps?:\/\//i.test (url ) ? 'http://' + str :
return url.
楼主知道吗?
15:14:21 UTC
这是facebook的flow，babel内置支持
21:48:23 UTC
我们和楼主情况差不多。
坦白讲，开发效率并没有特别多的提高，有时候还觉得写个小组件还要带一堆废话很烦。但是react的工作方式确实减少了很多bug出现的可能。
暂时用的alt，准备切换的redux
01:15:33 UTC
01:16:11 UTC动画效果，是一个页面上必不可少的功能，学习一个新的东西，当然就要学习，如何用新的东西，用它的方法去实现以前的东西啦。今天呢，我就在这里介绍一个试用react-addons-css-transition-group插件，在react中实现轮播图效果。
　　首先，大家需要了解的是，页面中的动画，可以分为两种，一种是js动画，这是用js脚本来驱动的动画，另一种呢，就是用css的transiton和animation来实现的动画效果。而我要讲的插件，就是利用CSS的Transition和animation来实现组件的出场和入场动画。
　　所以呢，我将先给大家简单介绍一下transition和animation，然后在介绍如何使用react-addons-css-transition-group插件，最后附上我实现的轮播图。
1. CSS3 transition
　　现在假设我们想让一个元素，当我们hover时，它的宽高从50px变为100px。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
height: 50
background-color: #f00;
.box:hover {
width: 100
height: 100
&div class="box"&&/div&
　　如果我们之间运行上面这段代码，当我们hover时，元素大小瞬间就变成了100x100，很突兀，视觉效果很差。
　　如果我们使用过渡transition属性的话，我们就可以让元素在我们指定的时间内，完成50x50到100x100的过渡动画。
.box:hover {
width: 100
height: 100
/* 指定过渡动画执行的时间，以及要执行动画的属性，
如果不指定直接改变，这里我们制定了宽高执行1s的过渡动画 */
transition: 1s width, 1
　　可以看到，使用transition后，变化就不再那么生硬了。我们还可以通过设置transition-delay，transition-timing-function 来设置延迟时间和过渡使用的变化函数。
　　当然从上面的动态图，你也可以发现，transition的缺点，比如只有开始和结束两个状态，不能设置中间态，以及必须需要事件驱动，一条规则对应一个属性等。因此css3 animation属性出现啦。
2. CSS3 animation
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
width: 100
height: 100
-moz-animation: rainbow 5s; /* Firefox */
@-moz-keyframes rainbow {
background-color: #f40;
background-color: #FF6100;
background-color: #FF0;
background-color: #0F0;
background-color: #00F;
background-color: #0FF;
background-color: #A020F0;
&div class="box"&&/div&
　　最终执行效果为：
　　动画是使元素从一种样式逐渐变化为另一种样式的效果，我们使用animation属性指定这个属性播放的动画名称，事件，动画函数等，我们用keyframes定义动画，规定在动画在关键帧样式。这是一个css3属性，在各大浏览器中使用，我们需要加相应的前缀。
　　我们还可以通过animation的一些属性，自定义设置, 如延迟，结束状态，停止状态等等。
3. React react-addons-css-transition-group插件
　　react-addons-css-transition-group插件，就是在上面两个css属性上实现，就像之前说的那样，它是利用css的transition和animation实现组件的进场和出场动画的。ReactCSSTransitionGroup是在ReactTransitionGroup的基础上进行再封装。
　　我先直接附上我的代码，然后进行详细讲解。
import React, {PropTypes} from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
/* 定义参数类型 */
const propTypes = {
imageSrc: PropTypes.array.isRequired,
currentIndex: PropTypes.number.isRequired,
enterDelay: PropTypes.number.isRequired,
leaveDelay: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
component: PropTypes.string.isRequired
/* 轮播图片组件，无状态组件 */
function CarouselImage(props) {　　/* 对象解析，参数分别对应：图片地址数组，当前展示图片索引，进场动画执行时间，出场动画执行时间，transition对应唯一key值，自动生成的包裹元素类型 */
let {imageSrc, currentIndex, enterDelay, leaveDelay, name, component} =
&ul className="carousel-image"&
&CSSTransitionGroup
component={component}
transitionName={name}
transitionEnterTimeout={enterDelay}
transitionLeaveTimeout={leaveDelay}
className={name}&
src={imageSrc[currentIndex]}
key={imageSrc[currentIndex]}
&/CSSTransitionGroup&
CarouselImage.propTypes = propT
export default CarouselI
　　1. ReactCSSTransitionGroup工作原理
　　当组件出现时，会在组件添加transitionName-appear类（transitionName由我们自己设置值），然后下一时刻会给组件添加transitionName-appear-active类；当组件进场时，给组件添加transitionName-enter类,然后下一时刻会给组件添加transitionName-enter-active类；当组件出场时，会给组件添加transitionName-leave类，然后下一时刻辉给组件添加transitionName-leave-active类，我们则可以在css文件中，通过设置transition，设置我们需要执行的动画。
　　一般情况下，我们主要使用后两种，并且，只有当组件的出场动画完全执行玩以后，组件才会被移除。
　　2. ReactCSSTransitionGroup组件参数
　　ReactCSSTransitionGroup其实就是一个组件，它规定了特定的参数，我们通过设置这些特定的参数，将这些参数反应到被其包裹的子组件中。下面，我们就其几个常见的参数进行讲解。
　　#&transitionName:&设置动态生成类的自定义前缀，如果我们设置为carousel-image-item，那么，就会相应的生成carousel-image-item-enter,&carousel-image-item-enter-active等。
　　# component: 字符串，设置ReactCSSTransitionGroup生成包裹子组件的标签，默认时span，我们可以通过这个参数自定义，如div。
　　#&transitionEnter:& 布尔值，设置是否使用出场动画，默认时true。
　　#&transitionEnterTimeout: 数值，设置入场动画的执行时间，需要在css中和这里同时设置，否则会提示警告。
　　#&transitionLeave:& 布尔值，设置是否使用出场动画，默认时true。
　　#&transitionLeaveTimeout: 数值，设置出场动画的执行时间，需要在css中和这里同时设置，否则会提示警告。
　　最后，说一下transitionAppear，它和其他两个不同，它默认时false，默认不执行。
　　3. 使用步骤
　　1）引包
　　import CSSTransitionGroup from 'react-addons-css-transition-group'; // ES6引包语法
　　2）将 CSSTransitionGroup组件添加到render中
&ul className="carousel-image"&
&CSSTransitionGroup
component={component}
transitionName={name}
transitionEnterTimeout={enterDelay}
transitionLeaveTimeout={leaveDelay}
className={name}&
src={imageSrc[currentIndex]}
key={imageSrc[currentIndex]}
&/CSSTransitionGroup&
　　在这里需要注意的是：CSSTransitionGroup组件需要添加到已经挂载到页面上的dom元素中（可以理解为，需要放在render函数中，且需要被包裹），或者transitionAppear设置为true的组件上。
　　最后，我们只需在自己的css文件中，添加对应类的样式即可。
　　我们可以在我们的生成的页面中看到下面结果：
　　最后的最后，提一下六个TransitionGroup组件生命周期吧。其实我们上面使用的是别人给我们封装好的，我们直接添加参数，就可以实现这些效果，但是这只能实现简单的出场入场效果，如果要自定义一些动画的话，我们就需要通过在这些声明周期中设置回调函数，自定义动画。下面我们来简单了解一下着六个生命周期函数吧。
　　1）ComponentWillAppear：组件将要出现时调用
　　2) ComponentDidAppear： 组件出现时调用
　　3) ComponentWillEnter： 组件将要进场时调用
　　4) ComponentDidEnter：进场的下一时刻调用
　　5) ComponentWillLeave：组件将要出场时调用
　　6) ComponentDidLeave：出场的下一时刻调用
4. 轮播图效果
　　最后，给大家分享我做的轮播图效果，以及代码。
　　github地址：/DiligentYe/react-carousel
　　过程中，由于直接用webpack的css-loader加载scss文件，会改变自定义类名的问题，我不得自定义index页面，在页面中引入bundle.js文件和解析后的css文件。
阅读(...) 评论()