React 16 - 构建可维护可扩展的前端应用

# 前端项目的理想架构

• 易开发
  • 开发工具是否完善
  • 生态是否繁荣
  • 社区是否活跃
• 可扩展
  • 增加新功能是否容易
  • 新功能是否会显著增加系统复杂度
• 可维护
  • 代码是否容易理解
  • 文档是否健全
• 可测试
  • 功能分层是否清晰
  • 副作用少
  • 尽量使用纯函数
• 易构建
  • 使用通用技术和架构
  • 构建工具的选择

# 拆分复杂度

# 按领域模型组织代码

按领域模型（feature）组织代码，降低耦合度

• 将业务逻辑拆分成高内聚松耦合的模块

• 通过 React 技术栈实现

# 组织 Component，Action 和 Reducer

• 文件夹结构
  • 按 feature 组织源文件
  • 使用 root loader 加载 feature 下的各个资源
  • 组件和样式文件同一级
  • Redux 单独文件夹在各个 feature 中
    • Action 和 Reducer 同一级，在 redux 下
  • 单元测试保持同样目录结构放在 tests 文件夹
  • constants.js 在 feature 中，变量名以 {FEATURE_NAME}_ 开头

# 组织 React Router 的路由配置

• 在每个 feature 中单独定义自己的路由

使用 JSON 定义顶层路由，更容易理解和维护

import { WellcomePage, CounterPage, Layout } from './';

export default {
  path: 'examples',
  name: 'Examples',
  component: Layout,
  childRoutes: [
    { path: '', name: 'Wellcome Page', component: WellcomePage },
    { path: 'counter', name: 'Counter Page', component: CounterPage },
  ],
}