##写在开始之前
前端从来都不缺少轮子,几乎每天都有新的轮子被创造出来。满目琳琅,数不胜数。但是当下最时兴的轮子恐怕就是React。从github上来看,目前React的watch数:1521
,start数:21522
,fork数:3018
。对比一下目前也相对时兴的一些技术,比如说Go,三个指标分别为:754
,786
,656
;在比如说Docker:1848
,21384
,4996
。由此可见React的火热程度。有幸去年十二月份也开始接触React,陆陆续续接触React也有小半年的时间了,是时候停下来把自己知道的,已经忘记的总结一下记录下来,万一能对刚入手React的同仁有点帮助,那更是求之不得。
##简单介绍一下React 官方文档的介绍是这样的:React是用来构建用户界面额Javascript库。前端的框架都已经这么多了,你们Facebook还开源React作甚?下边可能是官方给出的答案:我们和别的框架不一样,我们有以下特性: 1.我们不是一个传统的前端MVC框架,我们只关注V这一层。我们有component的理念,用户可以随便定义和重用component来构建页面。假设你的项目刚刚开始你可以使用React,如果一年之前你不认识React误选了Angular,React还是可以踏踏实实为你做好UI的工作。就是这么任性。 2.React定义了自己的虚拟DOM。我们发现了这样的一个事实:Javascript的执行速度是非常快的,但是DOM操作往往是比较耗时的。所以,我们提出了虚拟DOM的理念。通过虚拟DOM我们会过滤掉很多不必要的DOM操作。我们要做性能最高的前端框架。 3.我们的数据流是单向的,我们这样的机制可以帮助程序员快速定位bug。
看到这样的框架能不动心吗,以上我们统统代表Facebook。
提纲: -Jsx语法入门 -React的构建基础-Component -深入理解Component -Flux框架入门 //TODO -Fluxthis框架入门 //TODO -为什么React这么快[Virtual Dom] //TODO
Jsx语法入门
Jsx是React工具链中最基础的一环。Jsx是构建React Component的有力工具。Jsx之于React犹如Swift之于iOS。Jsx把javascript和xml揉在一起,在javascript中写xml标签。前几天逛论坛,有人提出了把html写到javascript文件中,大大影响了代码的美观和可读性。虽然,React提供了使用pure javascript的方式,但是,过后你会发现Jsx才是最高效的。并且写代码时费费脑子组织一下代码,代码的可读性是非常好滴。所以那个帖子中有人这样回复:
你可以尝试非Jsx的写法,但是迟早你会发现,其实Jsx更适合你。
言归正传,首先看一个简单的例子来熟悉一下jsx语法。
var Ul = React.createClass({ render: function() { var lis = [1,2,3].map(x => <li>{x}</li>) return ( <ul className="ul-class"> {lis} </ul> ); } }); //编译后 var Ul = React.createClass({displayName: "Ul",render: function() { var lis = [1,3].map(function(x) {return React.createElement("li",null,x);}) return ( React.createElement("ul",{className: "ul-class"},lis); ); } });
这个示例非常简单,展示1到3的数字列表。看一下render函数,首先它定义了一个lis的变量,这个变量记录了所有的li条目,每个li都是一个<li>
标签。然后,return中的<ul>
标签中使用了该变量。很简短的一个例子,对比一下编译后的代码,还是可以发现Jsx的版本是比较简洁明了的。如果想在html中插入javascript代码,使用{}
就行了。比如{ lis }
,{true ? ... : ... }
,{/* comment */}
这些都是支持的。但是下边的这些情况就是不可以的了{if(true) ... }
,虽然Jsx支持三元表达式,但是不支持if;{var x = 1}
这也是不可以的。那我们在{}内部在嵌套一个{}吗?对不起这样做也不行。
有时候我自己也纳闷:为什么Jsx支持的语法这么匮乏。我们来看一下Jsx不支持的几种情况: 1.{var x = 1}
。为什么要在html elements中间声明变量呢?仔细想一下数据其实都可以放到javascript代码中处理,html中只对处理好的结果做一个引用。{lis}
这样也就够了。
2.{if(true)....}
。在javascript中if-else是没有返回值的,是有两个表达式组成的复杂表达式,所以不支持if-else也很合理。同样把if-else逻辑放到javascript中去。
3.{"x"} {"y"}
。这个例子是我帮一个同事调代码是看到的。这case编译是不会有问题的,但是结果不是你想要的结果。强调一下:确保在html中的每一句javascript简单,能一句话搞定的不要搞成两句。
###我日常写Jsx的一些经验 1.确保每个render返回的结构清晰简单。要做到这一点要遵循下边两个要求:不要在html中混入复杂的处理逻辑@H_403_78@;提取Component@H_403_78@。 对于第一点,html和javascript杂糅在一起肯定会导致代码可读性降低,React专注于UI,所以每个Component除了名字要代表它的意义之外,它render的html也要一目了然。 第二点,不要搞超大Component。每一个Component都是一个函数,尽量让每一个Component只做一件事情(keep it simple)。Component有View Component和Business Component之分。这里着重指的是View Component,Business Component的复杂性由具体业务决定。Component小了,相对的html结构也就简单了。
2.处理页面逻辑时不要手动修改props。把props当做一个不可变的属性对待,不要直接就这props做数据处理。
3.还有一些code style上的建议,具体参考这篇文章吧。
##React的构建基础-Component
Component是React的核心理念。在React的世界里只有Component的概念,Component是构建应用的基础。就像React文档中给出的例子,搭建这样的一个应用我们需要这几种Component的组合。这是很有意思的事情,让我们写前端的时候不再关注这个页面应该有哪些div组成,每个div往哪摆这些琐碎的问题。而是站在一个更高的level对我们的应用做设计和规划。(我是一个前端门外汉,主观感受,说错了不负责任)
每个Component都是一个状态机,也就是说你把足球,篮球和棒球传入了展示Component,那么你一定会得到三种球类的展示。页面输出依赖于传入的数据,页面和传入的数据是保持一致性的。同时这种思想也符合函数编程思想,对于一个函数(component也是)相应的输入总能得到期望的输出。这对于程序员的好处就是对自己写的代码更放心。下面介绍些Component的使用。
###Component常用Api及生命周期
1.render:是Component必须要有的。render方法可以使一段html(注意,这段html必须由一个标签包围,并且标签要闭合),同时也可以引用其他的Component。render()方法必须是无副作用的,不能够修改Component的状态。
2.getInitialState:一些Component是拥有自己的状态的,这些状态要实现在getInitialState中声明。比如:
render: function() { return { name: "default" }; }
只有声明过之后的state才可以通过this.state.name
使用。getInitialState
函数只在Component挂在之前调用一次。
3.compomentDidMount:这个函数非常有用。如果Component依赖于后台数据,一般ajaxcall都会放在这个函数中。
4.propsTypes:propsTypes不是必须的,如果你需要严格的规定某个props的类型,以及指明某个props是否是必须的,可以使用该函数。
5.shouldComponentUpdate:这个函数是性能相关的函数,95%的情况下你不需要管它,但是需要知道它是干什么的。当Component的状态改变的时候,需要重新render一次,你可以通过这个函数控制Component是否应该重新render。
###props和state
React是非常容易上手的,哪怕是初体验者恐怕半个小时内都能跑起一两个例子。但是,用好React就得花一些功夫,其中state和props这两个概念觉得值得你花时间去研究。不论是props还是state都是都是提供数据的,但是props和state是完全不同的两种东西。
在说props和state之前先说一下Stateful Component和Stateless Component。
Stateless Component:这类Component可以说是Pure UI Component。它主要用作展示数据(图1中红框标记的Component),或者是一些简单的HTML标签的组合(图1中蓝框标记的Component)。
Stateful Component:这类Component主要负责前端后台的沟通(比如,发送ajax call),和响应页面事件(比如表单验证Component,需要一个state记录用户的输入)。
回到props和state上来:
props:props的职责的为Component提供配置信息,由Component外部提供。props是public的,React提供了propsTypes
函数来限制每个props的类型,以及是否可选的(optional)。还有props是只读的,不要在Component内部手动修改props。
比如有这样一个Component:显示一个带标题的输入框。这样的Component在表单场景中很常见,复用性非常高。那这个Component的title属性应该通过props传给Component。
state:state寄生在Component内部,是Component私有的属性,state使用前必须通过getInitialState
进行声明并初始化。当状态改变的时候调需要掉用setState
使最新状态生效。每次调用setState
方法都会触发Component重新render,切记setState方法不能在render方法中调用。state是专门针对Stateful Component的,对于Stateless 的Component完全可以忽略该属性。
###Thinking In React
先让大家看一个例子:
条件语句在JSX里太痛苦了,把条件提到前面的话模板太乱,用?:的话条件一多就写要崩,如果有个库可以这样用:
<div className="content-body"> { case() .when(!this.state.users,<div>Loading</div>) .when(!this.state.users.length,() => <div className="mute-text">No users</div>) .else(() => this.state.map(user => { ... }) ) .end() } </div>
首先,来分析一下他想要实现什么功能:应该是通过ajax call拿到一组user,然后把这些user展示到页面上,还有ajax pending时页面显示loading。非常常见的一个例子。然后我们看一下他的实现:根据user 状态3种不同的值来控制页面不同的展示结果。这种实现方式是可以解决问题的,但是这种思路不是特别的React。先给出一个比较合理的实现,做一个对比:
React.createClass({ getInitialState: function() { return {users: [],isDataReady: false} ;//when ajax done set `isDataReady` to true },render: function() { var usersTemplates = this.state.users.length > 0 ? this.state.users.map(user => <User user={user} />) : "no user"; return ( <div> <Splash show={ this.state.isDataReady}> //this template`s can handle if shows depends on isDataReady state { usersTemplates } //show users </div> ) } });
接着再来看一下上边的实现有哪些欠妥的地方: 1.对state的使用不是特别清楚,没有弄明白到底这个Component到底应该有哪些state。首先,这个Component有三种显示:Loading,No User,Users。第一种是在ajax call pending时的显示,当load到数据之后第一种显示切换为第二或第三种显示(依据是否有users)。那么这个Component到底应该有哪几个state呢?首先,users这个状态肯定需要;其次,isDataReady状态用来记录ajax call是否完成。
2.Component的抽象不清晰。实现这个需求至少需要两个组件:Splash和User。Splash在loading时显示,并且Splash是一个非常通用的组件,可以做到全站复用。有没有必要再抽一个Users的Component?这个可抽可不抽,主要看当前这个Component的功能及复杂性。
参考: Props vs State Thinking in React React Tips and Best Practices