React As Far As I Know

##写在开始以前

前端历来都不缺乏轮子，几乎天天都有新的轮子被创造出来。满目琳琅，数不胜数。可是当下最时兴的轮子恐怕就是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, 2, 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中混入复杂的处理逻辑；提取Component。 对于第一点，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