React-周边类库

围着Ract、facebook还开发了一系列的前端工具。在你的React项目中，这些工具不是非用不可的，不过它们确实可以和React一起完美的工作。例如：

Jest

Immutable.js

Flux

 

一、Jest是Factbook开发的一个测试运行工具。给予Jasmine测试框架提供相近的方式，使用大家熟悉的类似于expect（value）.to(other)的断言。它提供了默认的模拟行为，会自动模拟require（）返回的CommonJS模块。让现有的代码变成可测试的。它使用了模拟的DOM API ，同时通过小巧的Node.js命令行工具进行运行，缩短每次测试运行的时间。

 

1、设置

要在你的项目中使用est，首先需要创建一个_tests_文件夹（这个名字可以设置），然后在_tests_里创建一个测试文件：

//_test_/sum-test.js

jest.dontMock('../sum');

describe('sum',function(){
     it('adds 1+2 to equal 3',function(){

var sum =require('../sum');

expect(sum(1,2)).toBe(3);

}

});

 

});

使用npm install jest-cli --save-dev命令安装Jest，然后在命令行运行jest，你应该能看到运行结果。

 

2、自动模拟依赖

Jest默认会自动模拟源码文件中所有的依赖，它通过覆盖Node的require函数实现。

 

3、手动模拟依赖

有时候Jest的自动模拟一栏无法满足要求，这些场景下，Jest允许你针对特定的类库创建自己的模拟对象。

 

 

 

二、Immutable.js

 

不可以变数据结构（Immutable Data Structures）中的数据是不允许修改的。相反，如果数据需要改变，它们会返回原始数据的一个经过修改的拷贝，React跟Flux可以很好的结合不可变数据结构，带来代码的简洁和性能的提升。

Immutable.js提供了多个数据结构，可以有原生的JavaScript数据结构构造而成，在需要的时候，也可以转会原生的JavaSctipt数据结构。

 

1、immutable.Map

Immutable.Map可作为常规JavaScript对象的替代者来使用：

var question=Immutable.Map({desctiption:'who is your favorite superhero?'}）；

 

//使用.get从Map中取值

//同样原来的对象没有任何变化

var title={title:'Question#1'};

var question3=question.merge(question2,title);

question3.toObject();//{title: 'Question #1',desctiption":'who is your favorite comicbook hero'}

 

2、Immutable.Vector

可以使用Immutable.Vector代替数组：

var options=Immutable.Vector('superman','Batman');

var option2 =options.push('Spiderman');

option2.toArray();//['Superman','Batman','Spiderman']

 

你还可以对这些数据结构进行嵌套：varoptions=Immutable.Vector('Superman','Batman');

var question =Immutable.Map（{

description:'who is your favorite superhero?',

options:options

}）；

 

Immutable.js还有更丰富的特性，你可以到https://github.com/facebook/immutable-js上获取更多的相关信息。

 

 

三、Flux

Flux是Facebook在发布React时发布的一种模式。它显著的特性是严格的单向数据流。

Facebook在GitHub发布了一份关于实习那Flux的参考，可以通过https://github.com/facebook/flux访问到。

 

1、Flux包含了三个重要的组件

Dispatcher

Store

View