React项目小结系列:技术栈的选择及理由

博客好久没更新,12月考完期末考试之后一直在学校某创业团队做某个项目,通过一番努力争取到了技术栈的话语权,过年前几天基本完成了项目。当时的工作主要是搭一个基于pc端的社会各类考试相关的系统,主要功能大概有监考人员信息管理,考试信息的管理,考场信息的管理。

项目采用的技术栈是React+Redux+React-Router+immutable+ant-design,使用webpack+babel+npm script来构建项目。

选用上述技术栈的原因有如下一些:

1.React使用了Virtual DOM,隔离了DOM操作。前端的世界本来是DOM的世界,但是当我们使用原生DOM去构建一个复杂应用时,应用的状态将难以管理,不同代码之间耦合关系混乱,代码难以维护。当我们使用Virtual DOM之后,首先就是不用手动去操作DOM,除此之外React使用了高效的diff算法对每次render进行优化操作,提高了我们应用的性能。

2.React同时解决了数据和视图绑定的的问题。

项目实例说明(针对原因1和2):

针对上述两个原因,我这边举个本项目中的例子。比如说,在这个项目当中,有一个级联选择功能:对于某个学校,可以选择不同的教学楼,选择完教学楼之后,用户可以进行具体课室的选择,学校和教学楼的数据是固定的,但是课室的数据是来自用户的选择输入。用户会在不同的教学楼进行切换操作,也就是说,用户每次选择不同的教学楼,教学楼的课室选择页面都会重渲染。如果我们需要将用户的切换时候的每次选择缓存下来,我们如果单纯地使用DOM操作去获取并保存用户每次的选择值,不仅操作繁琐,而且性能极差,增加了用户等待时间。
而React恰好可以帮我们解决这个问题。我们可以将每次用户的操作的数据抽象作为当前组件的state,同时通过绑定事件在用户每一次选择时,触发setState()函数将视图中的状态保存到state当中。当我们配合redux时候,更可以将当前视图的状态绑定到store数据源上。如上,通过React,我们不仅不需要操作DOM,而且Virtual DOM提升了我们应用的性能。

3.React单向数据流的特点。单向数据流对应的就是双向数据绑定。经典的mvvm就是双向数据绑定,Model和View之间通过ViewModel进行双向数据绑定。双向绑定有很大优点,代码量相对较少,数据和视图变更都通过viewModel进行,但是双向数据绑定难以追踪变化和管理状态,在调试时相对不方便。而React推崇的单向数据流,数据流动方向可以跟踪,所有状态变化都可以记录,容易调试和定位bug。

4.Redux是一个可预测状态容器。Redux之所以是可预测,可监控状态也是它的特点决定:单一的数据源;只读的状态;纯函数的reducer。

项目实例说明(针对原因4):

在本项目,我们需要实现大量撤销,即时保存等功能,单一的的数据源使得我们可以轻松提取出当前应用的状态进行备份等操作。而数据源只读且只能通过action触发然后通过reducer修改,生成新的store,可以使得我们在开发过程中,配合redux devtool可以监测到用户的每一次操作带来的变化,极大地提高了我们的开发效率和方便我们的调试,所有的业务逻辑通过devtool展示的非常清晰。

5.Redux同时很好地解决了组件之间的通信问题。如果单纯使用React,我们可能需要各种回调函数结合props,从而实现父子组件和兄弟组件之间的通信。当使用了Redux之后,我们可以在全局修改store数据源,也可以全局获取数据源,不再需要复杂的代码。

6.此外React的组件化思想也是选择的原因。组件化可以帮助我们高度复用我们的代码,虽然本项目中复用的组件不是很多,不过此次项目的ant-design则恰好体现了React组件化思想。

7.选取webapck的原因有很多。

  • webpack通过babel-loader可以支持es6;
  • webpack不仅可以打包js,也可以通过其他不同的loader可以将jsx,css,json等其他格式进行打包。css通过css-module等方法,更是解决我们之间css作用域的痛点;
  • webpack内置热加载功能,方便我们调试代码;
  • 有缓存破坏/散列系统,支持我们利用webpack通过hash等方法实现缓存;
    强大的插件功能,我们可以方便地进行代码压缩,混淆,gizp压缩,冗余代码处理等等功能,而且插件配置相对容易。

总结一下,选择上述技术栈事实上就两个原因:更轻松愉快地写代码,写出性能更好和稳定的程序。