围着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