ihtml5 / blog

个人博客 源码阅读*前端实践 My Blog
MIT License
6 stars 0 forks source link

探索react技术栈-技术选型 #43

Open ihtml5 opened 7 years ago

ihtml5 commented 7 years ago

一.前言


陆陆续续接触react有一年多了,深感react的简单优雅,急切地想用react去开发程序。但是热情之后,发现react社区的种种问题。比如在社区打打常常提到的 angular vs react。react作为view层的库, 并没有给我们提供像angular那样全方位的解决方案。社区很多围绕react的解决方案层出不断,尚没有形成一致的最佳实践。那么,在现有的react解决方案下,我们能否提炼出一个行之有效的方案呢,笔者认为可以从以下几方面入手:

  1. 技术选型
  2. 项目目录划分
  3. 应用程序状态管理
  4. 前后台交互
  5. 测试
  6. 迭代式开发

本文作为探索react技术栈第一篇,首先来聊一聊基于react技术栈的技术选型。

二.技术选型


  1. View(react)

    使用react来构造view

  2. 状态管理(redux or mobx)

    reduxmobx是社区两个最著名的状态管理框架。可以选择其中一种,因为redux作者是react核心团队的开发者,基于redux的社区也非常庞大,推荐使用redux

  3. 路由(react-router)

    react-router是react社区公认的路由框架,但是这个库更新频繁,api变动比较大,笔者推荐使用其较稳定的v2.8.1

  4. 样式

    当前围绕react的样式解决方案,有三种即传统class声明,css in js,css modules

  5. 语言(Es6)

    对浏览器要求不高,即满足ie9+以上的,可以使用es6开发应用,然后通过babel转码,对于浏览器要求较高的,使用es5来编写,并引入pollify来支持浏览器兼容

  6. fetch

    fetch spec使用promise接口来进行后端接口请求,相比ajax来说,使用更加方便,在项目中,推荐使用fetch的官方实现

  7. 构建工具(webpack)

    webpack是社区公认的优秀打包工具,和react非常搭。配合gulp来完成流畅地前端开发。

  8. 测试(jest or enzyme)

    facebook推出的react测试工具jest和airbnb推出的enzyme都可以用来测试react

  9. mock(node or json mock server)

    基于react的开发,几乎都是前后端分离,通过mock后端的接口,可以加快前端的开发效率。构建mock接口,一可以通过node来自己编写mock server或者可以通过现有的json mock server比如jsonyeah

  10. 异步数据流处理

    对于简单的异步数据处理我们可以使用redux-thunk或者redux-promise,对于复杂的异步交互,可以使用redux-observableredux-sagas

相关链接


  1. react howto

  2. React + Redux 最佳实践

WangBiaoxuan commented 7 years ago

good job